Home arrow Style Sheets arrow Page 4 - Learn CSS, part 7: Pseudo Elements
STYLE SHEETS

Learn CSS, part 7: Pseudo Elements


We have discussed CSS selectors in the last three articles in this sereis. We have said that a selector can be a markup element, an attribute selector based on the class and ID attributes, or a structured selector based on the document structure. CSS introduces pseudo elements, which we will be discussing in this article. This is one area of functionality that you can't achieve using HTML, and you will be amazed how easily you can achieve it in CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 28
June 27, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, part 7: Pseudo Elements
  2. · Using the ::first-line Pseudo Element
  3. · Using the ::first-letter Pseudo Element
  4. · Using the ::selection Pseudo Element
  5. · The Content Property
  6. · The ::before and ::after Pseudo Elements

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

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 
Support 

Developer Shed Affiliates

 




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