CSS Selectors

div, p, ul - Type selector. Selects all elements of specific type.
'#id id selector. Selects all elements with id:

.
'#fancy span - Descendant selector. Selects any elements that are child id="fancy".
.classname - select all elements with class='classname'.
• • universal selector

Combinations:
ul.important - selects all

elements that have class='important'
p, .fun - selects all

elements as well as all elements with class='fun'
p * - selects all elements inside all

elements

Siblings:
p + .intro - Adjacent sibling selector, selects every element with class='intro' that directly follows

A ~ B - General sibling selector, selects all B that follow an A
A > B - Child selector, selects all B that are direct children of A
p:first-child - selects

elements that are first children of some other element
span:only-child - selects the elements that are the only child of some other element
span:last-child - selects all elements that are the last child
:nth-child(8) - selects every element that is the 8th child of another element
:nth-last-child(2) - selects all second-to-last child elements

Combinations:
div p:first-child - selects all first child

elements that are in

ul :only-child - selects all elements that are the only child inside

ul li:only-child - selects all

• elements that are the only child inside another element

  ul li:last-child - selects the last-child

  • elements inside another element

    div p:nth-child(2) - selects every second

    in every

    Types and attributes:
    span:first-of-type - selects the first in any element
    div:nth-of-type(2) - selects the second instance of a div
    span:nth-of-type(6n+2) - selects every 6th instance of , starting from (and including) the second instance
    p span:only-of-type - selects a within any

    if it is the only in there
    div:last-of-type - selects the last

    in every element
    div:empty - selects all empty

    elements
    :not(#fancy) - selects all elements that do not have id='fancy'
    a[href] - selects all elements that have a href='anything'
    input[type='checkbox'] - selects all checkbox input elements
    [attribute^='value'] - Attribute starts with selector
    [attribute$='value'] - Attribute ends with selector
    [attribute*='value'] - Attribute wildcard selector

    Combinations:
    .example:nth-of-type(odd) - selects all odd instances of the <class='example'>
    p span:last-of-type - selects the last in every

    div:not(:first-child) - selects every

    that is not a first child
    :not(.big, .medium) - selects all elements that do not have class='big' or class='medium'

    #css