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.

Next: The Content Property >>
 

More Style Sheets Articles
More By Michael Youssef

Comments On: Learn CSS, part 7: Pseudo Elements

· 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...   >>> Post your comment now!