| home / programming / css_utopia / chap3 / |    [previous] [next] |
|
|
|
Adjacency is unrelated to inheritance. Adjacency refers to the sequence in which elements appear in an HTML document. As it happens, adjacent elements are always siblings, but it’s their placement in the document, rather than their inheritance relationship, that is the focus of this selector. This is demonstrated in this HTML fragment:
<h1>This is important stuff!</h1> <h2>First important item</h2> <h2>Second important item</h2>
The first h2 heading is adjacent to the h1 heading. The second h2 heading is not adjacent to the h1 heading. Neither h2 heading inherits from the h1 heading.
The adjacent selector uses the + sign as its connector, as shown here:
h1 + h2 {
margin-top: 11px;
}
This style rule would put an extra 11 pixels of space between the bottom of an h1 heading and an immediately-following h2 heading. It’s important to recognize that an h2 heading that follows a paragraph under an h1 heading would not be affected.
As of this writing, Internet Explorer for Windows (up to and including version 6) remains the only major browser that does not support adjacent selectors in its latest version. Because of this, the adjacent selector has not yet found widespread use in practical Web design.
The group of selectors I’m lumping together as “attribute selectors” are among the most interesting of all the CSS selectors, because they almost feel like programming techniques. Each attribute selector declares that the rule with which it is associated is applied only to elements that have a specific attribute defined, or have that attribute defined with a specific value.
There are four levels of attribute matching:
[attribute] – matches if the attribute is defined at all for the element(s)
[attribute="setting"] – matches only if the attribute is defined as having the value of setting
[attribute~="setting"] – matches only if the attribute is defined with a space-separated list of values, one of which exactly matches “setting”
[attribute|="setting"] – matches only if the attribute is defined with a hyphen-separated list of “words” and the first of these words begins with setting
You might, for example, want to apply style properties to all single-line text input boxes (<input type="text" />) in your document. Perhaps you want to set their text and background colors to white and black, respectively. This style rule would have that effect:
input[type="text"] {
color: white;
background-color: black;
}
The third variation of the attribute selector described above searches the values assigned to an attribute, to see whether it contains the word you’ve specified (i.e. a value in a space-separated list).
For example, during the development of a Website, various graphic designers may have inserted temporary placeholder alt text tags, with the idea of returning to them later to finish them. You could call attention to the existence of such tags with a style rule like this:
img[alt~="placeholder"] {
border: 8px solid red;
}
This selector will find all img tags whose alt attributes contain the word “placeholder” and will put an 8-pixel red border around them. That ought to be hard to miss!
The fourth variation is really useful only when you’re dealing with the lang attribute. It enables you to isolate the first portion of the lang attribute, where the human language being used is defined. The other portions of the hyphen-separated value are ignored. It would be pretty rare to use this version, but it comes in handy when the language defined is en-cockney and you’re really only interested in whether the language is English.
As you would expect by now, attribute selectors are not supported by Internet Explorer for Windows. As with other advanced selector types, this has prevented widespread adoption of attribute selectors, despite their obvious usefulness.
To apply a style rule to elements in an HTML document of several different types, use selector grouping. Separate with a comma each element type to which the rule is to be applied.
Here’s a simple example of this type of selector:
h1, h2, h3 {
font-family: verdana, arial, sans-serif;
color: green;
}
The elements in the selector list need not be all of the same type or even of the same level of specificity. For example, the following style rule is perfectly legal. It applies a specific style to level 2 headings (h2) and to paragraphs whose class is defined as special:
h2, p.special {
font-size: 22px;
}
You may include a space between the comma-separated items or not.
| 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
