05. Specificity

What is that?

div {
  background-color: purple;
}

.wrapper {
  background-color: green;
}

<div class="wrapper"></div>

div {
  background-color: purple;
}

.wrapper {
  background-color: green;
}

#main {
  background-color: yellow;
}

<div class="wrapper" id="main"></div>

div.wrapper {
  background-color: purple;
}

#main {
  background-color: yellow;
}

<div class="wrapper" id="main"></div>

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

#element {
  background-color: yellow;
}

<main>
  <div class="wrapper" id="element"></div>
</main>

main div {
  background-color: blue;
}

.wrapper {
  background-color: orange;
}

<main>
  <div class="wrapper" id="main"></div>
</main>

div {
  background-color: green;
}

div {
  background-color: black;
}

<main>
  <div class="wrapper" id="main"></div>
</main>

main div {
  background-color: green;
}

div {
  background-color: black;
}

<main>
  <div class="wrapper" id="main"></div>
</main>

<div>
  <p> Some text </p>
  <p> Some other text </p>
</div>

p {
  color: yellow;
}

p ~ p {
  color: green;
}

p + p {
  color: red;
}

<div>
  <p> Some text </p>
  <p> Some other text </p>
</div>

div p {
  color: blue;
}

p {
  color: red;
}

<div>
  <p> Some text </p>
  <p> Some other text </p>
</div>

p {
  color: blue;
}

p {
  color: red;
}

By tonkec palonkec