Section 4.3. Pseudo-Element and Pseudo-Class Selectors
4.3. Pseudo-Element and Pseudo-Class SelectorsIn rare instances, you might want to assign a style to a well-defined component of an element (pseudo-element) or to all elements that exhibit a particular state (pseudo-class). 4.3.1. Pseudo-ElementsA pseudo-element gets its name because the CSS declaration of this type causes the browser to act as if it has inserted an artificial element into an existing element. For example, CSS defines pseudo-elements for the first letter and first line of a block-level element. The HTML source code for the real element might be something simple: <p>A mere paragraph.</p> But a browser that implements the :first-letter and :first-line pseudo-elements would treat the p element as if it were structured as follows: <p><p:first-line><p:first-letter>A</p:first-letter> mere paragraph.</p:first-line></p> The location of the </p:first-line> end tag, of course, depends on the rendered version of the p element. If the paragraph were sized to fit a narrow column, and the first line word-wrapped after the word "mere," the :first-line pseudo-element's invisible end tag would follow the space after "mere." The point of all of this is that you can assign numerous style properties to these very specific portions of a block-level element, such as a drop capital letter: p:first-letter {font-size: 36pt; font-weight: 600; font-family: Rune, serif; float: left} or an all-uppercase first line: p:first-line{text-transform: uppercase} Regardless of the pseudo-element structure or style assignments, the document tree is unaffected. In the simple p element example, the element contains one text child node. To help differentiate pseudo-elements from pseudo-classes in CSS markup, CSS3 introduces a new notation using a double colon, as in the following: p::first-line{text-transform: uppercase} Browsers that implement the new notation (all mainstream browsers except IE through version 7) also support the old notation to accommodate legacy code. As of CSS2, four pseudo-elements have been defined, as shown in Table 4-2. Note that the :first-letter pseudo-element acknowledges style properties only of the following types: background, border, clear, color, float, font, letter-spacing, line-height, margin, padding, text-decoration, text-shadow, text-TRansform, vertical-align (when float is none), and word-spacing. The :first-line pseudo-element acknowledges style properties only of the following types: background, clear, color, font, letter-spacing, line-height, text-decoration, text-shadow, text-TRansform, vertical-align, and word-spacing. CSS3 introduces the optional ::selection pseudo-element, whose style properties are to be applied to a user selection (e.g., as a way to style selected text in a printer-friendly manner).
4.3.2. Pseudo-ClassesThe a element has readily distinguishable states: a link that has not been visited, a link being clicked on, a link that has been visited in recent history. These states are called pseudo-classes; they work like class selector definitions but don't have to be labeled as such in their element tags. A pseudo-class always operates as a kind of modifier to another selector. In the following example, notice how the :hover pseudo-class operates on all a elements in one rule, and applies an extra color property to an a element singled out by its ID: a {text-decoration: none} a:hover {text-decoration: underline} #specialA:hover {color: red} The classness of a pseudo-class is not always based on an element's state. Document tree context, page position (right or left), and even language are examples of the possibilities that pseudo-classes afford. For example, the :first-child pseudo-class turns its associated element into a special class (i.e., a class capable of defining its own style propertys) whenever the element is a first child element in a document tree. Thus, the following style rule applies a different font size for every p element that is the first child of any container with the class name section: .section > p:first-child {font-size: 110%} The use here of the > child selector limits the scope of the p:first-child pseudo-class to first children of specific containers. Removing the child selector would cause the rule to apply to any p element that is the first child of any other container. Table 4-3 provides a summary of pseudo-classes supported by CSS2. Implementation in mainstream browsers is sporadic.
CSS3 introduces a large collection of new pseudo-classes, some of which are already implemented in the latest mainstream browsers. The largest group of new selectors allow you to assign style properties to elements that meet very specific contextual criteria, such as every other row of a table, without burdening the HTML markup with lots of class attributes. Some selectors allow style sheets to complement or replace the browser's default rendering for states, such as a disabled element or a "checked" button. Table 4-4 lists CSS3 selectors as of the latest W3C Working Draft available before going to press.
|
EAN: 2147483647
Pages: 120