Because CSS3 is based on CSS2 specification, there are many selectors that exist in both CSS levels. However let's mention just those added in CSS3 specification only:

  • [attribute^=] - beginning matches exactly
  • [attribute$=] - ending matches exactly
  • [attribute*=] - contains the match
  • :root - represents the root element of the document (i.e. <html>)
  • :nth-child(n) - matches exact child elements (or use variables to get alternating matches)
  • :nth-last-child(n) - matches exact child elements counting up from the last one
  • :nth-of-type(n) - matches sibling elements with the same name before it in the document tree
  • :nth-last-of-type(n) - matches sibling elements with the same name counting up from the bottom
  • :last-child - matches the last child element of the parent
  • :first-of-type - matches the first sibling element of that type
  • :last-of-type - matches the last sibling element of that type
  • :only-child - matches the element that is the only child of its parent
  • :only-of-type - matches the element that is the only one of its type
  • :empty - matches the element that has no children (including text nodes)
  • :target - matches the element that is the target of the referring URI
  • :enabled - matches the element when it's enabled
  • :disabled - matches the element when it's disabled
  • :checked - matches the element when it's checked (i.e. checkbox input field)
  • :not(s) - matches the element when it does not match the simple selector (s)
NOTE: The first three selectors on the list are attributes and the rest of them are pseudo classes.

Examples

Attribute beginning matches exactly:

element[name^="text_"]; // finds an element with attribute 'value' and the value of it starting with 'text_'

Attribute contains the match:

element[name*="text_field"]; // finds an element with attribute 'value' and the value of it being exactly 'text_field'

 

›› go to examples ››