Home arrow DHTML arrow Page 3 - Style Sheet Property Reference

Style Sheet Property Reference

If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the first part of a series, covers colors, selectors, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
August 30, 2007
  1. · Style Sheet Property Reference
  2. · Colors
  3. · Pseudo-Element and Pseudo-Class Selectors
  4. · Pseudo-Classes

print this article

Style Sheet Property Reference - Pseudo-Element and Pseudo-Class Selectors
(Page 3 of 4 )

In 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 (pseudoclass).


A 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

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 fol lowing 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).

Table 4-2. CSS2 pseudo-elements

Name IE/Windows IE/Mac Moz/Saf/Op CSS Description
:after n/a n/a all 2 The space immediately after an element (see content property)
:before n/a n/a all 2 The space immediately before an element (see content property)
:first-letter 5.5 5 all 1 The first letter of a block-level element
:first-line 5.5 5 all 1 The first line of a block-level element

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials