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.
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:
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.