Home > Developer > Web Develop
Selection |
[CSS4] applies to parts of the document that are highlighted by the user (for example, using a mouse or other selection of selected devices). (IE8 and below are not supported) (Firefox-moz-selection) |
First-line |
Select the first row of each <p> element and set the style for it. |
First-letter |
Select the first letter of each <p> element and set the style for it. |
Before |
Insert new content before the contents of each <p> element. |
After |
Insert new content after each <p> element's content. |
Cue |
|
Backdrop |
|
Placeholder |
|
Marker |
|
Spelling-error |
|
Grammar-error |
As with pseudo-classes, pseudo-elements are added to selectors, but do not describe special states, which allow you to style certain parts of an element. Sometimes you find that the pseudo element uses two colons (::) Instead of a colon (:). This is part of the CSS3 and attempts to differentiate between pseudo-classes and pseudo-elements. These two values are supported by most browsers.
If the page only need to be compatible with WebKit, Firefox, Opera and other browsers, it is recommended to use a double colon for pseudo-elements, if you have to be compatible with IE browser, or with CSS2 single colon is more secure.
All pseudo-elements can be implemented, and real child elements can be done. But sometimes simply for the sake of style and layout to change the HTML structure, this approach is not clean, not worth advocating, so there is a pseudo-element of the market. I used pseudo-elements to draw a printer, unpack half of the envelopes, and use it to achieve a non-regular picture contour. But these real child elements can do the same, but not the content structure and style separation.
Note: Dom cannot be passed operations manipulate pseudo-elements directly.
1.1 Each pseudo-element functionSelection pseudo-elements are applied to parts of the document that are highlighted by the user (for example, using a mouse or other selection of selected devices).
Only a small subset of CSS properties can be used for:: Selection selector: color, background-color, cursor, outline, text-decoration, Text-emphasis-color and Text-shadow. It is important to note that Background-image is ignored as other attributes.
Note: The Text-shadow attribute in selection only has Chrome, Safari and Firefox 17+ support.
As shown in the following:
<! DOCTYPE html> <style> ::-moz-selection { Color:gold; background:red; } :: Selection { Color:gold; background:red; } p::-moz-selection { Color:white; Background:black; } p::selection { Color:white; Background:black; } </style> <body> <div class= "textarea" contenteditable= "true" ><br/></div> <div> offers:: Selection pseudo-element selector Test text </div> <p> also try to select the text in this P tag </p> </body> |
When you select the text for the P and Div labels in the page, the selected text applies the styles set in the style, respectively.
Pseudo-class selector for CSS selectors (pseudo-element)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
