CSS Selectors - Short Reference
This 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
Attribute selectors
Select Elements by contained attributes
Example: img[title] {border: 1px solid yellow;}
-> Applies to all img's with title attributes.
or even more specific:
Example 2: img[src="pic.gif"] {border: 2px solid gold;}
Pseudos
Pseudo class selectors
Select elements in a special (pseudo) state. Pseudo classes are [first-child, link, visited, lang(n)].
Syntax: element:pseudoclass.
I.e. div#editorial:first-child {text-transform:capitalize;}
Dynamic pseudo class selectors
Select elements in a special (pseudo) state. Pseudo classes are [hover, active, focus].
Syntax: element:pseudoclass.
I.e. a:hover {color:red;}
Pseudo element selectors
Select special (pseudo) elements. Pseudo elements are [first-line, first-letter, before, after].
Syntax: element:pseudoclass.
I.e. p:first-letter {font-size:130%;}
In the end
Keep these possibilities in mind then you can make most things without extra class definitions.
I like Andy Clarke’s approach of the “Transcending CSS” - use only standard elements of HTML as long as possible.
There will be some water down the river until I write my recension of Transcending CSS - so here are some links for now:
- Transcending CSS reviews on Amazon
- Transcending CSS on htmlcenter
- Another book compilation on Six Revisions
- A recension of a transcending video on GraphicMania
- And another good book compilation by veerle
