CSS/Specificity

by trentHarlem

HTML

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
<h2>
  Selectors and Combinators
</h2>

<div>one
</div><br>
<div>two
</div><br>
<div class='container'>
<p>
container
</p>
<br>
   <div>three
  </div>
  <div>four
  </div>
  <br>
  
</div>
<br>

<div>five
</div><br>
<div>six
</div><br>
<div>seven
</div><br>
<div>eight
</div><br>

CSS

body {
  background-color: wheat;
}

h2 {
  font-size: 2rem;
}

div {
  background-color: green;
  height: 20px;
  width: 100%;
  border: 4px solid #111;
}

.container {
  background-color: dodgerblue;
  height: auto;
  padding: 10px;
  width: 100%;
  border: 4px solid #111;
}

/*   > child combinator   */

/*    parent > child       */

.container > div {
  background-color: yellow;
  height: 70px;
  margin: 5px;
  width: 100%;
  border: 4px solid orange;
}


/*   + Adjacent sibling combinator   */

/*   former_element + target_element       */
.container + div {
  background-color: orange;
  height: 70px;
  width: 100%;
  border: 4px solid #111;
}


/*   ~ General sibling combinator   */

/*   former_element ~ target_element       */
/* .container ~ div {
  background-color: firebrick;
  height: 70px;
  width: 100%;
  border: 4px solid #111;
}
 */