The CSS pseudo class is used to add special effects to certain selectors.
Examples of CSS pseudo-classes:Syntax of pseudo classes:
selector:pseudo-class {property: value}
CSS classes can also be used with pseudo classes.
selector.class:pseudo-class {property: value}Pseudo-anchor
In browsers that support CSS, different links can be displayed in different states, including activity, accessed, inaccessible, and hovering.
a:link{color: #FF0000} /* unvisited link */a:visited{color: #00FF00} /* visited link */a:hover{color: #FF00FF} /* mouse over link */a:active{color: #0000FF} /* selected link */
Tip: In css definition, A: hover must be placed after a: link and a: visited.
Tip: In css definition, A: active must be placed after a: hover, which is valid.
Tip: the pseudo-class name is case insensitive.
Pseudo and CSS classesPseudo classes can be used with CSS classes:
a.red:visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>
If the link in the above example has been accessed, it will be displayed in red.
Css2-: First-Child pseudo class: The first-Child pseudo class matches the first child element of another element.
Example 1:In this example, the selector matches the element whose first child element is P in the DIV element-indent the first paragraph in the DIV element:
div > p:first-child { text-indent:25px }<div><p>The first section in the div. This section will be indented.</p><P> the second part of the div. This section is not indented. </P></div>
The section in the following HTML will not be matched:
<Div>Header<P> the first section in Div, but not the first child element in Div. This section is not indented. </P> </div>
Example 2: In this example, the selector matches the element whose first child element is em in P-and sets the first em element in P to bold:
p:first-child em { font-weight:bold }
For example, em in the following HTML is the first child element of a paragraph:
<p>I am a <em>strong</em> man.</p>
Example 3: In this example, the selector matches the first child element of any element as a-sets the text-decoration attribute to none:
a:first-child { text-decoration:none }
For example, the first a element in the following HTML is the first child element in the section, so there is no underline.
However, the second a is not the first child element of a paragraph, so it is underlined.
<P> access<a href="http://www.w3school.com.cn">W3School</a>Learn CSS! Visit <a href = "http://www.w3school.com.cn"> w3school </a> to learn HTML! </P>
Css2-: Lang pseudo class : Lang pseudo classes enable you to define special rules for different languages. In the following example, The Lang class defines the type of quotation marks for q elements whose property value is no:
> Referenced text in a paragraph </q> text </P> </body> Pseudo class<HTML> q:lang(no) { quotes: "~" "~" }</Style> lang="no"Browser support:IEInternet Explorer,F: Firefox,N: Netscape.
W3C: The number in the W3C column shows which CSS standard defines the pseudo-class attribute (css1 or css2 ).
| Pseudo class | Function | IE | F | N | W3C |
|---|---|---|---|---|---|
| : Active | Add a style to an activated Element | 4 | 1 | 8 | 1 |
| : Focus | Add a style to the selected Element | - | - | - | 2 |
| : Hover | Add a style to the element when the mouse is hovering over the element | 4 | 1 | 7 | 1 |
| : Link | Add a special style to a link that has not been accessed | 3 | 1 | 4 | 1 |
| : Visited | Add special styles to accessed links | 3 | 1 | 4 | 1 |
| : First-child | Add a special style to the first child element of the element. | 1 | 7 | 2 | |
| : Lang | Allows creators to define the language used in the specified element. | 1 | 8 | 2 |
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
