CSS pseudo-class
May 03, 2021 CSS
Table of contents
4. CSS - :first - child pseudo-class
6. Matches the first of all the elements
CSS Pseudo-classes
CSS pseudo-classes are special effects for adding selectors.
Because the state change is non-static, when an element reaches a specific state, it may get a pseudo-class style; A
s you can see, its functionality is somewhat similar to class, but it is based on abstractions outside the document, so it's called a pseudo-class.
Grammar
The syntax of a pseudo-class:
selector:pseudo-class {property:value;}
CSS classes can also use pseudo-classes:
selector.class:pseudo-class {property:value;}
Anchor pseudo-class
In CSS-supported browsers, the different states of the links can be displayed in different ways
A: visited {color: # 00ff00;} / * Accessed links * /
A: Hover {color: # ff00ff;} / * Mouse brightened link * /
A: Active {color: # 0000FF;} / * Selected link * /
Try it out . . .
Note: In the CSS definition, a:hover must be placed after a:link and a:visited before it is valid.
Note: In the CSS definition, a:active must be placed after a:hover before it is valid.
Note: The name of the pseudo-class is not case sensitive.
Pseudo and CSS classes
Pseudo-classes can be used with CSS classes:
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
If the link to the example above has been accessed, it will appear in red.
CSS - :first - child pseudo-class
You can use the :first-child pseudo-class to select the first child element of an element
Note: Previous versions of IE8 must state that the DOCTYPE, so that :first-child can take effect.
Matches the first element
In the following example, the selector matches the element as the first child of any element:
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>我是一个强壮的男人.</p>
<p>我是一个强壮的男人.</p>
</body>
</html>
Try it out . . .
Matches the first of all the elements
In the following example, select the first of all the elements that match the one:
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>
Try it out . . .
Matches all of the element that is the first child element of the element, all of the element of the element
In the following example, the selector matches all of the elements that are the first child of the element:
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>
Try it out . . .
CSS - : Lang pseudo-class
:lang pseudo-classes give you the ability to define special rules for different languages
Note: I E8 must state that the D OCTYPE; Lang pseudo-class.
In the following example, the lang class defines the type of quotation marks for a q element with a property value of no:
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
</body>
</html>
Try it out . . .
More instances
Add different styles to hyperlinks
This example shows how to add additional styles to hyperlinks.
Use :focus
This example shows how to use the :focus pseudo-class.
All CSS pseudo-classes/elements
| Selector | Example | Example description |
|---|---|---|
| :link | a:link | Select all unresoled links |
| :visited | a:visited | Select all the links you've visited |
| :active | a:active | Select the active link |
| :hover | a:hover | The status of the mouse on the link |
| :focus | input:focus | The element is selected to have focus after input |
| :first-letter | p:first-letter | Select the first letter of each element |
| :first-line | p:first-line | Select the first line of each element |
| :first-child | p:first-child | The selector matches the element of the first child element that belongs to any element |
| :before | p:before | Insert content before each element |
| :after | p:after | Insert the content after each element |
| :lang( language ) | p:lang(it) | Select a start value for the lang property of the element |
Extended reading
CSS Pick-Up Series: Talk about pseudo-elements and pseudo-classes in CSS