30 CSS Selectors

you're gonna wanna memorize*

* Adapted from envatotuts' 30 CSS Selectors You Must Memorize 

• Used to target all element on the page
• Often used to zero out margins and padding
• Can also trail a more specific selector (`ul *`, for instance)

* {
  /* rules */
}

the universal selector

• Target an element by its id
• Prefer class selectors unless you have a specific need for an id

#foo {
  /* rules */
}

the id selector

<div>
  <p id="foo">Foo!/p>
  <p>Not foo</p>
</div>

• Target elements by class
• Unlike id selector, class selector targets any and all elements with the class name

.foo {
  /* rules. */
}

the class selector

<p class="foo">Foo!</p>
<p>Not foo</p>
<p class="foo bar bizz bang">Also foo!</p>

• Target all elements that are descendants (i.e., direct or or indirect children) of another selected element.
• The example to the left targets all anchor tags that are descendants of an element with the class .foo

.foo a {
  /* rules. */
}

the descendant selector

<p class="foo">Foo!</p>
<p>Not foo</p>
<p class="foo bar bizz bang">Also foo!</p>

the descendant selector