CSS Selectors - Short Reference
Monday, June 23rd, 2008This is a “short as possible” reference for CSS selector syntax. Intended audience should be very familiar with XHTML, DOM and CSS Styling.
Basics
Type selector
Select all HTML elements of a special type.
Example: em {font-weight: bold;}
Class selector
Select all elements with a given class.
Example: .classname {font-weight: normal;}
ID selector
Select the one element with a given id.
Example: #idname {font-weight: normal;}
Concatenator
Select HTML elements of special type only with given class/id.
Example: em.classname, em#idname {font-weight: normal;}
Universal selector
Select all elements.
Example: * {padding:0;}
Descendent selector
Select all elements that are lower down in the DOM tree (descendants).
Example: p em {font-weight: normal;}
-> Applies to all em's within p's.
Advanced
Child selector
Select all elements that are children in the DOM tree (direct descendant).
Example: p > em {font-weight: normal;}
-> Applies to all em's directly within p's, not supported by ie6 and below.
Adjacent sibling selectors
Select all elements that are on the same DOM level in the same DOM subtree
Example: h3 + p {font-size:80%;}
-> Applies to all p's that "belong" to a h3
(more…)
