demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

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* { outline: none; }For selecting every element in a document (or site-wide, if used in a linked style sheet). Used for “CSS resets”: setting all elements to the same appearance 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.

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

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.