demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

Selector syntax

In an embedded or linked style sheet, a selector is the markup you are altering the appearance of. There are several different selection methods, the simplest of which are shown below:

CSS Selector Syntax, CSS Levels 1 and 2
Name Example Use
Universal or “wildcard” selector* { margin: 0; }For selecting every element in a document (or site-wide, if used in a linked style sheet). Commonly used for CSS resets to set all elements to the same default properties.
Single selectorp { color: green; }To select a single tag.
Grouped selectorsh1, h2, h3 { color: red; }To have multiple elements share the same style rule(s).
Descendant selectorul li { font-weight: bold; }Applies the style declaration that applies only to the last element if it is a descendant of the selector sequence. For the example shown, li elements will be bold, but only if they are in the context of (i.e. descend from) a ul element. (li elements in ordered lists will be unaffected)
Sibling selectorh2 ~ p { font-color: red; }Selects all matching elements that follow at the level of the leading element
Adjacent selectorh2 + p { font-style: italic; }Selects the element if it comes immediately after the one before it. In the example shown, the first paragraph immediately after an h2 element will be italicized. Other paragraphs outside of this context will be unaffected.
id selectorul#nav { background: blue; }Selects elements that have an id that matches the word following the pound sign. Note that this id must be unique to the page. (The same id can be used on multiple pages, but only once per page).
Class selectorp.special { color: red; }Selects elements that have a class attribute with a value matching the word following the period in the selector. Classes may be used multiple times on a page, but should not be the majority of content associated with that element.
Attribute value selectorinput[type="text"]Applies only to tags in which an attribute has a particular value.

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.