Most common CSS selectors

Child Selector

The 'child selector' (>) will select a direct descendant that matches, but only go one level deep.

Given the following HTML:

<div class="outer">
  <div class="inner">
    <div class="very-inner"></div>
  </div>
</div>

// targets inner, but not very-inner
.outer > div {

}

Descendent Selector

The 'descendent selector' ( i.e. a space) will select any descendent that matches, infinite levels deep.

// targets both inner and very-inner
.outer div {

}

• selectors

More common CSS selectors

• * selects all elements
• *, *::before, *::after selects all elements and pseudoelements
• #an-id selects the single element with that id
• .a-class selects all of the elements with that class
• X, Y selects elements that match selector X or selector Y
• X Y selects the elements matching Y that are descendants of X
• tag name: selects the elements of that tag
• a:visited
• a:link
• X:hover
• X + Y: It will select only the specified element that immediately follows the former specified element.
• X > Y: direct descendant, child
• X ~ Y: general sibling selector