CSS Pseudo-classes (pseudo-classes)

CSS pseudo-class selectors match components based on other conditions, not necessarily defined by the document tree. CSS pseudo-classes are keywords added to selectors that specify the special state of the elements to be selected. For example, :hover can be used to change the color of a button when the user hovers over it with the mouse.

What is a pseudo-class

CSS pseudo-classes allow you to set the styles of elements in dynamic states, such as hover, active, and focus states, as well as elements that exist in the document tree but cannot be targeted by other selectors, without adding any selectors for their ID or class, such as targeting the first or last child element.

Pseudo-classes start with a colon (:). Their syntax can be given in the following way:

The following section describes the most commonly used pseudo-classes.

anchor pseudo-classes

UsingAnchorPseudo-class links can be displayed in different ways:

These pseudo-classes allow you to style unvisited links and visited links. The most common styling technique is to remove the underline from visited links.

a:link {
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Some anchor pseudo-classes are dynamic-They are applied due to user interaction with the document (such as hover or focus, etc.).

a:hover {
　　　　color: red;
}
a:active {
　　　　color: gray;
}
a:focus {
　　　　color: none;
}

These pseudo-classes change the way links respond to user operations.

• :hover Applies when the user places the cursor on an element but does not select it.

• :active Applies when an element is activated or clicked.

• :focus Applies when an element has keyboard focus.

:first-child pseudo-class

:first-The pseudo-class child matches the elements of the first child of some other elements. ol li:first-In the following example, the selector selects the first list item of an ordered list and removes the border from the top of it.

ol li:first-child {
　　　　border-top: none;
}

:last-pseudo-class

:last-The pseudo-class child matches the elements of the last child of some other elements. Below ul li:last-The selector in the child example selects the last list item from the unordered list and removes the right border from it.

ul li:last-child {
　　　　border-right: none;
}

:nth-child pseudo-class

CSS3An new :nth-The child pseudo-class allows you to target one or more specific child objects of a given parent element. The basic syntax of this choice can be used with the :nth-child(N), where N is a parameter that can be a number, a keyword (even or odd), or a form of expression xn+y, where x and y are integers (for example1n,2n,2n+1, ...).

table tr:nth-child(2n) td {
　　　　background: #eee;
}

The style rule in the above example only highlights the代替table row without adding any ID or class to the element.

Lang pseudo-class

The language pseudo-class :lang allows for the construction of selectors based on the language settings of specific tags. The following example of the pseudo-classQuotes are defined for elements with explicit language values. no.

q:lang(no) {
　　　　quotes: "~" "~";
}
/*　HTML code snippet　*/Some text A quote in a paragraph Some text.

Pseudo-classes and CSS Classes

Pseudo-classes can be used in conjunction with CSS classes.

class="red" in the following example, the links will be displayed in red.

a.red:link {　　　　/*　style rule　*/
　　　　color: #ff0000;
}
<a class="red" href="#">Click me</a>　　　　/*　HTML code snippet　*/