Style Sheets
  Home arrow Style Sheets arrow Page 4 - Learn CSS, part 7: Pseudo Elements
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Learn CSS, part 7: Pseudo Elements
By: Michael Youssef
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 17
    2005-06-27

    Table of Contents:
  • Learn CSS, part 7: Pseudo Elements
  • Using the ::first-line Pseudo Element
  • Using the ::first-letter Pseudo Element
  • Using the ::selection Pseudo Element
  • The Content Property
  • The ::before and ::after Pseudo Elements

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Learn CSS, part 7: Pseudo Elements - Using the ::selection Pseudo Element


    (Page 4 of 6 )

    The ::selection pseudo element is introduced in the CSS 3 Specifications (not CSS 2) and it isn't yet supported by major browsers such as Microsoft Internet Explorer. Safari 1.2 is the only browser that supports this pseudo element for now. Mozilla 1.7 supports the ::selection Pseudo Element as ::-moz-selection. Here, moz stands for Mozilla; we will talk about that in a minute.

    This pseudo element applies the styling rules to the user's selected text. In other words, it applies the styles to the text that the user has highlighted using the mouse. Using this new pseudo element you can apply another background color and another text color, instead of the default highlighting style (which is dark blue for the background with white text). We can change these colors using the ::selection pseudo element, but notice that the CSS 3 Specifications stated that there are only four CSS properties that can be used with this pseudo element:  outline, color, cursor and background-color.

    I will use Mozilla 1.7 for this example, too, so I will use its CSS ::-moz-selection Pseudo Element. Add this code to the CSS file, then reload the page and highlight some text to see the effect:

    ::-moz-selection
    {
      background-color: red;
      color: yellow;
    }

    As you can see, the selected text has been styled as yellow text with a red background.

    So why does Mozilla use the name ::-moz-selection instead of ::selection? Well, the ::selection pseudo element is new to CSS. It has been introduced with the CSS 3 Specifications, which are under development and might be updated (because they're not ratified yet). Mozilla implements some of the CSS 3 properties and precedes it with the prefix -moz- (such as the pseudo element ::selection as ::-moz-selection) so we can see that this is a Mozilla implementation of the new CSS 3 properties, which are not supported by browsers yet. Actually they did so because any of the CSS 3 properties can be left out of the final specifications. Mozilla will remove the -moz- prefix for the properties that will be included in the final release of the CSS 3 Specifications.

    More Style Sheets Articles
    More By Michael Youssef


       · Hi, I was trying to keep up but do better with a full working example. Thank You
       · Thanks for your comment but I thought that all the readers can create a style sheet...
     

    STYLE SHEETS ARTICLES

    - Swapping Column Positions in Web Page Layout...
    - Creating Web Page Layouts with Negative Marg...
    - Creating Gradients for Individual Containers...
    - Creating Gradients for Web Page Headers with...
    - SEO Scrolling Frames Problem Solved
    - Building Cross-Browser Background Effects wi...
    - CSS: Pseudo
    - Using PNG Images to Build Background Effects
    - CSS: Continuing the Clarification of CSS Cla...
    - CSS: Top Secret Classification
    - CSS: Dimensions
    - CSS: Margins and Padding
    - CSS: Crossing the Border
    - CSS: Text, Fonts, and Tables
    - CSS: Working with Text







    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway