CSS Selectors

Here is a useful list of CSS selectors to be used throughout your CSS documents. We will be using many of them in the upcoming series "The Comprehensive Guide, Dreamscape".

However much you know about HTML, these selectors should be obvious, and easy to understand, within HTML markup you use "elements" (a), "attributes" (href="") and "values" (title=""); in the same way CSS markup uses "selectors" (#title), "properties" (width:) and "values" (200px;).

So to get you started:

• Universal Selector Selects all elements on the page (*)
• Type Selector Selects every instance of a given element (div, p, a, etc)
• ID Selector Selects one instance with the specified id attribute; this selector can only be used once per page (#header)
• Class Selector Selects every instance with the specified class attribute; this can be used many times per page (.list)
• Descendant Selector Selects all elements that are descendants of another element in the document tree (#header h1)
• Child Selector Selects all direct children of a parent element; it will not select all descendants, only the direct children (#header>h1 will target any h1 that is a direct child of #header, even if it immediately follows the element or not)
• Adjacent Selector Selects any sibling immediately following and element (h1+p will target the p element following an h1)
• :first Pseudo Selector Selects only the first child, line or letter of an element (li:first-child, p:first-line and h1:first-letter)
• Attribute Selectors Selects elements based on their attributes or attribute values (img[alt] tagets and attribute; img[src="logo.png"] targets and attribute value; img[alt~=logo] targets space-seperated instances of a value; img[alt|="logo"} targets hyphen-seperated instances of a value)
• Combinators The characters ">", "+", and any whitspace used to construct selector combinations.

Posted On: Wednesday, April 23rd, 2008 @ 4:24 pm by Ian Tearle

0 Comments

There are no comments on this entry. You should add one below.