| home / programming / css_utopia / chap3 / |    [previous] [next] |
|
|
|
The ID selector permits you to identify single instances of HTML elements where you wish to override the style properties set in, for example, a class style rule. Like a class selector, an ID selector requires definition in the style sheet and explicit inclusion in the HTML tag. Use the “#” symbol to identify an ID selector[3]. IDs must be unique within a document; no two HTML tags in a single document should have the same ID.
This style sheet rule defines a rule for an element with the ID unique:
#unique {
font-size: 10px;
}
The code below shows how to indicate the element to be affected by the above rule using the HTML id attribute:
<h4 id="unique">This will be a very tiny headline</h4>
For example, if you had five <div class="sidebar"> items on your page, but you wanted to style differently the one responsible for displaying your site’s search box, you could do so like this:
div.sidebar
{
...
}
#searchbox
{
...
}
Now, if both of these rules define a background-color property, and your search box tag was <div id="searchbox" class="sidebar">, then the search box would get all the sidebar properties assigned to it, but it would take its background-color from the #searchbox rule. The guidelines for cascading overlapping rules (discussed in Chapter 9, Text Effects and the Cascade), in combination with the ID selector, let you avoid having to redefine all the sidebar properties in a special searchbox class.
However, you could just as easily define a class and apply it to the exceptional element (the search box, in this example). This is more flexible, although perhaps not as efficient in terms of code space. For example, after you’ve identified a class or other rule that applies to all level three headings except one, and if you’ve used an ID selector for the exception, what do you do when a redesign or content change requires even one more such exception? The ID selector solution breaks down immediately in that situation.
It appears from my testing that not all of the newer browsers enforce the rule that the ID be unique in the document. Instead, they apply the ID rule to all elements in the document that carry the ID. That makes the ID essentially equivalent to the class selector. This is clearly not what the CSS specification had in mind, but it is how many of the browsers I’ve tested behave.
This and all the remaining selectors in this section require a browser that supports the CSS2 specification.
The pseudo-element and pseudo-class selectors are unique among the CSS selectors in that they have no equivalent HTML tag or attribute. That’s why they use the prefix “pseudo”, meaning “false.”
So far, the CSS specification has defined only three pseudo-elements: first-letter, first-line, and first-child. While the first two of these phrases mean something to us humans, it’s ultimately up to each browser to interpret them when rendering HTML pages using these pseudo-elements. For example, does first-line mean “first sentence” or does it mean first physical line displayed, a value that changes as the user resizes the browser? The first-child pseudo-element, on the other hand, is not browser-dependent. It refers to the first descendant of the element to which it is applied, in accordance with the HTML document hierarchy described in Section , “How Inheritance Works in CSS”.
To define a pseudo-element selector for a style rule, precede the pseudo-element name with a colon. Here’s an example:
p:first-letter {
font-face: Gothic, serif;
font-size: 250%;
float: left;
}
This creates a drop-caps effect for the first letter in every paragraph on the page. The first letter in each paragraph will be a Gothic letter 2.5 times larger than the usual type used in paragraphs. The float style property, which we discuss in Chapter 6, Putting Things in Their Place, ensures the remaining text in the paragraph wraps around the enlarged drop-cap correctly.
| 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
