Posts in current category

CSS pseudo-class


May 03, 2021 22:00 CSS


Table of contents


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:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

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:

<html>
<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:

<html>
<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:

<html>
<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:

<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
</body>
</html>

Try it out . . .


CSS pseudo-class

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