05. Specificity

What is that?

Cemu to sluzi?

Example 1

https://jsfiddle.net/tonkec/b3w0tax2/

Example 2

https://jsfiddle.net/tonkec/cou4teax/8/​

Koje boje ce biti div?

div {
  background-color: purple;
}

.wrapper {
  background-color: green;
}
<div class="wrapper"></div>

Koje boje ce biti div?

div {
  background-color: purple;
}

.wrapper {
  background-color: green;
}

#main {
  background-color: yellow;
}
<div class="wrapper" id="main"></div>

Koje boje ce biti div?

div.wrapper {
  background-color: purple;
}

#main {
  background-color: yellow;
}
<div class="wrapper" id="main"></div>

Koje boje ce biti div?

main div.wrapper {
  background-color: purple;
}

#element {
  background-color: yellow;
}
<main>
  <div class="wrapper" id="element"></div>
</main>

Koje boje ce biti div?

main div {
  background-color: blue;
}

.wrapper {
  background-color: orange;
}
<main>
  <div class="wrapper" id="main"></div>
</main>

Koje boje ce biti div?

div {
  background-color: green;
}

div {
  background-color: black;
}
<main>
  <div class="wrapper" id="main"></div>
</main>

Koje boje ce biti div?

main div {
  background-color: green;
}

div {
  background-color: black;
}
<main>
  <div class="wrapper" id="main"></div>
</main>

Zadaća

https://www.youtube.com/embed/CHyPGSpIhSs?enablejsapi=1

Koje boje ce biti drugi p?

<div>
  <p> Some text </p>
  <p> Some other text </p>
</div>
p {
  color: yellow;
}

p ~ p {
  color: green;
}

p + p {
  color: red;
}

Koje boje ce biti svi p?

<div>
  <p> Some text </p>
  <p> Some other text </p>
</div>
div p {
  color: blue;
}

p {
  color: red;
}

Koje boje ce biti prvi p?

<div>
  <p> Some text </p>
  <p> Some other text </p>
</div>
p {
  color: blue;
}

p {
  color: red;
}