Home > Developer > Web Develop
CSS pseudo-classes are special effects that you can use to add some selectors.
GrammarSyntax for pseudo-classes:
Selector:pseudo-class {property:value;}CSS classes can also use pseudo-classes:
Selector.class:pseudo-class {property:value;} Anchor pseudo-ClassIn a browser that supports CSS, the different states of a link can be displayed in different ways
Instance a:link {color: #FF0000;}/* Links not visited */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.
Pseudo-class and CSS classesPseudo-classes can be used in conjunction with CSS classes:
a.red:visited {color: #FF0000;}If the link in the above example has been accessed, it will be shown in red.
CSS-: first-child pseudo-ClassYou can use the: First-child pseudo-class to select the first child element of an element
Note: Prior versions of IE8 must be declared <! Doctype>, this way: First-child can take effect.
Match the first <p> elementIn the following example, the selector matches the <p> element of the first child element of any element:
Examples <style>In the following example, select the first <i> element that matches all of the <p> elements:
Examples <style><H2 matches all <i> elements in the <p> element of the first child element: <= "" p= ">
Examples <style>: The lang pseudo-class gives you the ability to define special rules for different languages
Note: IE8 must declare <! Doctype> to support; Lang pseudo-class.
In the following example, the Lang class defines the type of quotation marks for the Q element with a property value of No:
Examples <style>Add a different style to the hyperlink
This example demonstrates how to add additional styles to a hyperlink.
Use: Focus
This example demonstrates how to use the: Focus Pseudo-class.
| 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 every <p> element |
| : After | p:after | Insert content before each <p> element |
| : lang (language) | p:lang(it) | Select a start value for the <p> element's lang attribute |
CSS pseudo-Class (pseudo-classes)
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
