Selectors Master Race

Basic Selectors

Always use least specificity you need, so all li's instead of ids. Makes future use better

• #myID <li id="myID">

• .myClass <li class="myClass">

• li //element selector

• ul li //descendant selector

• ol > li //direct child selector

• li.myClass + li //adjacent sibling(closest/immediately after)

• li.myClass ~ li //matches all later siblings

• * //all

Attribute Selectors

element[attribute] - select elements containing the named attribute

• img[alt] {}

• img:not([alt])

• E[attr="val"] // exact case-sensitive if attribute is case sensitive

• E[attr~="val"] //full word matches i.e spaces aroudn

• E[attr|="val"] // attr has val or begins with val-(useful for languages i.e "lang en-uk" or "lang en-us")

• E[attr^="val"] // starts with val

• This adds link at end of link for all external links, attr(href) prints the exact url preprocessing

  a[href^=http]:after { content: " (" attr(href) ")"; }

• E[attr$="val"] //ends with val

  a[href$=pdf] { background-iamge: url(pdficon.gif); }

• E[attr*="val"] //appears anywhere in content

• E[attr="val" i] //i adds case insensitive

UI pseudo-classes

Based on current state of UI, recall CSS updates immediately

input[type=checkbox]:checked + label {
  color: red;
}

• :default

• :valid

• :invalid

• :out-of-range //with using min and max, step default to 1

• :not(:valid) { ... }

Specificity

• {} 0-0-0 //which every has highest number in the column wins left to right

• 1-0-0: ID selector

• 0-1-0: Class selector

• 0-0-1: Element Selector

• On tie whichever comes later