| home / programming / css_utopia / chap3 / |    [previous][next] |
|
|
|
Recall from Chapter 1, Getting the Lay of the Land, that every CSS style rule consists of two parts: a selector, which defines the type(s) of HTML element(s) to which the style rule applies, and a series of property declarations that define the style.
So far, we’ve seen only simplistic selectors. Typically, they’ve contained only one element:
h1 {
font-size: 18px;
text-transform: capitalize;
}
We have encountered one or two instances where a single rule is designed to apply to more than one kind of HTML element:
h1, h2, h3 {
font-size: 18px;
text-transform: capitalize;
}
These are the most basic selectors in CSS. There are many others. Table 3.1 summarizes all the selector types available in CSS, roughly from simplest to most complex. The remainder of this section describes each type of selector in detail, in the order in which they appear in Table 3.1. Selector types that are defined for the first time in the CSS2 specification or that have changed between CSS1 and CSS2 are marked with “(CSS2).”
Table 3.1. Types of CSS Selectors
| Selector Type | Use or Meaning | Example(s) |
|---|---|---|
| universal selector (CSS2) | Apply rule to all elements in document. | * |
| element type | Apply rule to all HTML elements of the selector’s type. | h1 |
| class selector | Apply rule to all HTML elements of the type preceding the period (or all, if none is specified) whose definition makes them part of the class following the period of the selector. | .articletitle |
| ID selector | Apply rule to only one element in the entire document: the one whose id attribute matches the string following the pound sign (hash mark) in the selector. | #special3 |
| pseudo-element selector (CSS2) | Apply rule to occurrences of the pseudo-element. | p:first-letter |
| pseudo-class selector (CSS2) | Apply rule to occurrences of the pseudo-class, whose appearance may change as the user interacts with the page. | a:hover |
| descendant selector | Apply rule to elements of the right-most type in a space-separated list of element types only where that element type descends from (i.e., inherits) the type to its left. | p em |
| parent-child selector (CSS2) | Apply rule to all elements of type specified to the right of the “>”, which are children of the elements to the left of the “>” (stricter form of the descendant selector). | body > p |
| adjacent selectors (CSS2) | Apply rule to all elements of type specified to the right of the “+”, which are physically adjacent (in the HTML code, not necessarily on the visible page) to elements of the type to the left of the “+”. | h1+h2 |
| attribute selectors (CSS2) | Apply rule to all elements with attributes matching the profile specified in square brackets. | p[align] |
The universal selector has no real practical value by itself. A style rule with no selector applies to all elements of all types on a Web page, so the asterisk is superfluous.
However, the universal selector can come in handy in specific situations involving, for example, attribute selectors, which I explain later in this section.
In this example, all elements in the page are given a text color of red:
* {
color: red;
}
The single element selector is the most common selector. It specifies one HTML element type with no qualifiers or enhancements.
In the absence of other style rules applying to the element type provided in the selector, this rule applies to all such elements on the page.
In this example, we specify the text and background colors (black and white, respectively) for the document by assigning these properties to the body element:
body {
color: black;
background-color: white;
}
To apply a style rule to a potentially arbitrary group of elements in a Web page, you’ll need to define a class in the style sheet, and then identify through their HTML tags the elements that belong to that class.
Defining a class in a style sheet requires that you precede the class name with a period. No space is permitted between the period and the name of the class. The following style sheet entry defines a class named special. Because there’s no HTML element name associated with the class, any type of element on a page using this style sheet can be identified with the class, as you’ll see in a moment.
.special {
font-family: verdana, arial, sans-serif;
}
If you want to include only elements of a particular type in your class, you can use the more specific selector shown here:
p.special {
font-family: verdana, arial, sans-serif;
}
The above style rule would apply only to paragraph elements that were identified as being members of the class called special.
Within the HTML markup, you can indicate that an element belongs to a class by using the element’s class attribute:
<p class="special">Paragraph of stuff.</p>
An HTML element can belong to multiple classes if you wish, simply by listing the classes (separated by spaces) in the class attribute:
<p class="special exciting">Paragraph! Of! Stuff!</p>
If you define an element-specific class such as the p.special example above, and then associate that class (in this case, special) with an element of any other type, the style rule simply does not apply to that element
| home / programming / css_utopia / chap3 / | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap3
