Developer Forums | About Us | Site Map
Search  
HOME > TUTORIALS > CLIENT SIDE CODING > CSS TUTORIALS > USE CASCADING STYLE SHEETS SELECTORS


Sponsors





Useful Lists

Web Host
site hosted by netplex

Online Manuals

Use Cascading Style Sheets Selectors
By Nicholas Chase - 2004-01-28 Page:  1 2 3 4 5 6

Pseudo-classes and Pseudo-elements

Finally, let's look at a group of selectors that is not based on any particular element but on specific conditions within the document: pseudo-classes. Designated by a colon preceding the name, pseudo-classes are independent of particular elements and instead look at what's happening within the document. The most common (and most widely implemented, though not available in Netscape 4.x) is the :hover pseudo-class, which applies when the user rolls the mouse over an element, as shown in the code in Listing 9 and in Figure 7.

Listing 9. Using the :hover pseudo-class

    

...
   <style type="text/css">

      * { font-family: Verdana }
      td { font-size: 10pt }
      .category { font-weight: bold; }
      td.category { font-style: italic }
      #bestinshow { color: red }
      p a { text-decoration: none }
      h4 + h4 { font-style: italic }
      :hover { background-color: red }
   </style>
...

Figure 7. Using the :hover pseudo-class
hover pseudo class

Other, less-widely supported pseudo-classes include :first-child, :link, :visited, :active, and :focus and :lang. Note that a pseudo-class can be applied to a specific element type, like this:

p:first-child { font-size: larger }

Pseudo-elements are similar to pseudo-classes (and share syntax with them) but define content within the document. Pseudo-elements defined by the CSS2 Recommendation include:

  • :first-line, which selects the first line of content, even if that changes based on the size of the window
  • :first-letter, which can be used for effects such as drop caps
  • :before and :after, which are combined with another selector and are usually used to insert content into the document, like this:
    • *.category:before { content: "Category: " }


View Use Cascading Style Sheets Selectors Discussion

Page:  1 2 3 4 5 6 Next Page: Summary and Resources

First published by IBM developerWorks


Copyright 2004-2017 GrindingGears.com. All rights reserved.
Article copyright and all rights retained by the author.