Advanced stuff about CSS selectors

Posted on by

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 :