HTML and CSS Reference
In-Depth Information
* { color: blue; }
would apply a blue foreground (text) color to all elements. Headings, paragraphs, lists, cells in tables, and
even links—all would turn blue because the universal selector selects the entire universe. This is the least
specific selector available, because it's not specific at all.
Element Selector
An element selector selects all instances of an element, specified by its tag name. This selector is more
specific than the universal selector, but it's still not very specific because it targets every occurrence of an
element, no matter how many of them there may be. For example, the rule:
em { color: red; }
gives every em element the same red foreground color, even if there are thousands of them in a document.
Element selectors are also known as type selectors .
Class Selector
A class selector targets any element that bears the given class name in its class attribute. Because a
class attribute can be assigned to practically any element in HTML, and any number of elements can
belong to the same class, this selector is not terribly specific but is still more specific than an element
selector. In CSS, class selectors are preceded by a dot ( . ) to distinguish them. For example, this rule will
style any elements belonging to the “info” class, whatever those elements happen to be:
.info { color: purple; }
ID Selector
An ID selector will select only the element carrying the specified identifier. Practically any element can
have an id attribute, but that attribute's value may be used only once within a single document. The ID
selector targets just one element per page, making it much more specific than a class selector that might
target many. ID selectors are preceded by an octothorpe ( # ). (This is often called a hash, number sign, or
pound, but octothorpe is the character's proper name. It also sounds cool and will impress people at dinner
parties.) The following rule would give the element with the ID “introduction” a green foreground color:
#introduction { color: green; }
Pseudo-class Selector
A pseudo-class is preceded by a colon ( : ) and is somewhat akin to a class selector (and is equal to
classes in specificity), but it selects an element in a particular state. Some of the most common pseudo-
classes relate to links:
Search WWH ::

Custom Search