Last update : June 24, 2014

CSS selectors are made up of a pattern that is matched against all elements in the document tree, it’s the part that comes before the opening curly brace. The selector types are :

• Universal : *  (Matches any element)
• Type :  p  (Matches  element p)
• Class :  .info (Matches any element whose class attribute contains the value info)
• ID : #temp (Matches any element with an id equal to temp)
• Descendant : p b (Matches any b element that is a descendant of an p element)
• Child : p > b (Matches any b element that is a child of an p element)
• Adjacent : p + b (Matches any b element immediately preceded by a sibling element p)
• Attribute : p[att condition] (Matches any p element whose att attribute is compliant to the condition)
• Pseudo-Class : p:action (Matches p during certain  actions; pseudo-classes are first-child, link, visited, active, hover, focus, lang(cc))
• Pseudo-Element : p:content (Matches p for certain contents; pseudo-elements are first-line, first-letter, before, after)

CSS Selectors can be grouped and combined :

• Multiple class selectors :p.info.error {color:#900;font-weight:bold;}(Matches p elements which have both “info” and “error” in their list of class names)
• Descendant selectors :div#temp li p.info { color:#f00; }(Matches all p elements with a class name of “info” that are contained by an li element that is contained by a div element with the id “temp”)
• Child selectors :p > strong { color:red }(Matches all strong elements that are children of a p element)
• Adjacent siblings selectors :p + p { color:green }(Matches an element p which is the next sibling p to the first element)
• Grouping :#my1, #my2,  #my3 {color:blue}(Matches all elements with the id’s my1, my2 and my3)
• Attributes selectors :p[lang|=en] { color:yellow }(Matches all elements whose lang attribute starts with “en”)

:before and :after

The :before and :after pseudo-elements can be used to insert generated content before or after an element’s content.

3 digit color hex codes:

The 3 digit only hex codes are shorthand for the codes that have the numbers repeated in pairs.

#06C = #0066CC

z-index:

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). An element with a negative value is displayed behind any with an undefined or positive z-index value in the same stacking context.

Some useful links about CSS are :

• W3schools
• 456 Berea Street
• cssplay