<main class="parent">
  <div class="child group1">
    <div class="grand-child group1"></div>
  </div>
  <div class="child group2">
    <div class="grand-child group2"></div>
  </div>
  <div class="child group3">
    <div class="grand-child group3"></div>
  </div>
</main>

/* This rule will only select divs with a class of child */
main > div {
  /* Our cool CSS */
}

/* This rule will only select divs with a class of grand-child */
main > div > div {
  /* More cool CSS */
}

/* This rule will only select the div with the class child group2 */
.group1 + div {
  /* Our cool CSS */
}

/* This rule will only select the div with the class child group3 */
.group1 + div + div {
  /* More cool CSS */
}

/* This rule will select all of .group1's siblings - in this case the 2nd and 3rd .child divs */
.group1 ~ div {
  /* Our cool CSS */
}
// any divs that are preceded by group 1

// The order you place the css values in the style sheet matter
// when the selectors are exactly the same

// The color will be black
.favorite {
   color: red;
}
.favorite {
   color: black;
}

// When to use !important ?
.last {
   margin-right: 0 !important;
}
// If there are a bunch of blocks with margin, but you don't want it 
// to hit the border of the parent

What style is applied?

!important → overrides even inline styling

Universal selector → no value

Pseudo elements get 0,0,0,1; pseudo classes get 0,0,1,0

So.. if you need to, use an id to select something. In general, when you need to select something, use the minimum amount of selectors.

Pseudo classes

// Place style that you want to affect everything here
:root {
	box-sizing: border-box;
}

// :first-child and :last-child will match elements
// that are the first or last sibling.

:first-child<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

p:first-child {
  font-size: 1.5em;
}

// :empty means it has no children 

// :only-child for an element with no siblings

// :nth-child is a little more dynamic 

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

.module:nth-child(4n) {
  margin-right: 0;
}

By attribute

[src] {
    /* This will target any element that has a src attribute. */
  }

  img[src] {
    /* This will only target img elements that have a src attribute. */
  }

  img[src="puppy.jpg"] {
    /* This will target img elements with a src attribute that is exactly "puppy.jpg" */
  }

Inheritance

Properties for the child will be inherited from the parent. This is how the cascade works. Cascade in CSS is understood through inheritance and specificity. Not all properties inherit. Font properties will, but not properties like size, padding, or margin. You can also set the inherit property on an element.