Home > Developer > Web Develop
CSS pseudo-classes are special effects that you can use to add some selectors.
Syntax for pseudo-classes:
Selector:pseudo-class {property:value;}CSS classes can also use pseudo-classes:
Selector.class:pseudo-class {property:value;} anchor pseudo-classa:link {color: #FF0000,}/* The link */a:visited {color: #00FF00,}/* visited link */a:hover {color: #FF00FF;}/* Mouse over link */a:active { Color: #0000FF;} /* The selected link */Note: in CSS definitions, a:hover must be placed after A:link and a:visited to be valid.
Note: in the CSS definition, a:active must be placed after a:hover to be valid.
Note: the name of the pseudo-class is not case-sensitive.
All CSS pseudo-classes/elements| Selector | SelectorExample | Example Description |
|---|---|---|
| : Checked | Input:checked | Select all the selected form elements |
| :d isabled | Input:disabled | Select all disabled Form elements |
| : Empty | P:empty | Select all P elements that have no child elements |
| : Enabled | Input:enabled | Select all enabled form elements |
| : First-of-type | P:first-of-type | Select each parent element is the first p child element of the P element |
| : In-range | Input:in-range | Select values within the specified range of elements |
| : invalid | Input:invalid | Select all elements that are not valid |
| : Last-child | P:last-child | Selects the last child element of all P elements |
| : Last-of-type | P:last-of-type | Select each P element is the last P element of its parent element |
| : Not (selector) | : Not (P) | Select all elements other than P |
| : Nth-child (N) | P:nth-child (2) | Select the second child element of all P elements |
| : Nth-last-child (N) | P:nth-last-child (2) | Selects the second child element of all P-element reciprocal |
| : Nth-last-of-type (N) | P:nth-last-of-type (2) | Select the second child of P for all P-element reciprocal |
| : Nth-of-type (N) | P:nth-of-type (2) | Select all P elements the second is a child element of P |
| : Only-of-type | P:only-of-type | Select all elements that have only one child element as P |
| : Only-child | P:only-child | Select all P elements that have only one child element |
| : Optional | Input:optional | Select element attributes without "required" |
| : Out-of-range | Input:out-of-range | Select element properties for values outside the specified range |
| : read-only | Input:read-only | Select element properties for read-only properties |
| : Read-write | Input:read-write | Select an element property without a read-only attribute |
| : Required | Input:required | Select the element property specified with the "required" property |
| : Root | Root | Select the root element of the document |
| : Target | #news: Target | Select the currently active #news element (click the name of the URL containing the anchor) |
| : Valid | Input:valid | Select Properties for all valid values |
| : Link | A:link | Select All not visited links |
| : Visited | a:visited | Select all the links you have visited |
| : Active | A:active | Select Active link |
| : hover | A:hover | Put the mouse on the link state |
| : Focus | Input:focus | Select element input with focus |
| : First-letter | P:first-letter | Select the first letter of each <p> element |
| : First-line | P:first-line | Select the first line of each <p> element |
| : First-child | P:first-child | Selector matches the <]p> element of the first child element that belongs to an arbitrary element |
| : Before | P:before | Insert content before each <p> element |
| : After | P:after | Insert content after each <p> element |
| : lang (language) | P:lang (IT) | Select a start value for the <p> element's lang attribute |
CSS pseudo-elements are special effects that are used to add some selectors.
: First-line Pseudo-ElementThe "first-line" pseudo-element is used to set a special style to the first line of text.
In the following example, the browser formats the first line of text of the P element according to the styles in the "first-line" pseudo-element:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>WENG</title> <style>P:first-line{Color:#ff0000;font-variant:Small-caps;}</style></Head><Body> <P>1 You can use the "first-line" pseudo-element to set a special style to the first line of text.</P> <P>2 You can use the "first-line" pseudo-element to set a special style to the first line of text.</P></Body></HTML>View Code
All CSS pseudo-classes/elements
| Selector | SelectorExample | Example Description |
|---|---|---|
| : Link | a:link | Select All not visited links |
| : Visited | a:visited | Select all the links you have visited |
| : Active | a:active | Select Active link |
| : hover | a:hover | Put the mouse on the link state |
| : Focus | input:focus | Select element input with focus |
| : First-letter | p:first-letter | Select the first letter of each <p> element |
| : First-line | p:first-line | Select the first line of each <p> element |
| : First-child | p:first-child | Selector matches the <]p> element of the first child element that belongs to an arbitrary element |
| : Before | p:before | Insert content before each <p> element |
| : After | p:after | Insert content after each <p> element |
| : lang (language) | p:lang(it) | Select a start value for the <p> element's lang attribute |
CSS Learning (iv)
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
