What are the pseudo-classes in css

css pseudo-classes: ":active", ":any-link", ":blank", ":checked", ":current", ":first", ":first-child", " :future", ":focus", ":has()", ":host", etc.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

Pseudo-class selector (referred to as: pseudo-class) is defined by a colon, which defines the state of the element, such as click pressed, click completed, etc. The style can be modified for the state of the element through pseudo-classes. CSS pseudo-classes are used to add some special effects to selectors.

Pseudo-class list in css

:active	:any-link	:blank	:checked	:current	:default
:defined	:dir()	:disabled	:drop	:empty	:enabled
:first	:first-child	:first-of-type	:fullscreen	:future	:focus
:focus-visible	:focus-within	:has()	:host	:host()	:host-context()
:hover	:indeterminate	:in-range:invalid	:is()	:lang()	:last-child
:last-of-type	:left	:link	:local-link	:not()	:nth-child()
:nth-col()	:nth-last-child()	:nth-last-col()	:nth-last-of-type()	:nth-of-type()	:only-child
:only-of-type	:optional	:out-of-range	:past	:placeholder-shown	:read-only
:read-write	:required	:right	:root	:scope	:target
:target-within	:user-invalid	:valid	:visited	:where()

##Commonly used Pseudo-classes and their classification

#1. Dynamic pseudo-class selector

Different states use different styles.

• E:link

• E:visited

• E:active

• E:hover

• E :focus

2. The target pseudo-class selector

is used to match the target element of an identifier in the URI of the page. .

E:target

Select all elements that match E, and the matching elements are pointed to by the relevant URL.

3. Language pseudo-class selector

is used to match elements using the specified language.

E:lang(language)

4. Element status pseudo-class selector

When the element is in a certain state It only takes effect when the setting is disabled, and does not take effect in the default state.

• E:checked

eg:

input[type="checkbox"]:checked{}

• E:enabled

eg:

input[type="text"]:checked{}

• E:disabled

eg:

input[type="text"]:disabled{}

5. Structural pseudo-class selector

This one is more common and is used more frequently.

• :nth-child

• ##:nth-last-child

• :nth-of-type

• :nth-last-of-type

• :first-child

• :last-child

• :only-child

• :first-of-type

• :last-of-type

• :only-of-type

• : root

  Matches all the root elements of the document

• :empty

  Selects elements that have no child elements and does not contain nodes

6. Negative pseudo-class selector

• E:not(F)

  Matches all E elements except F

(Learning video sharing:

css video tutorial

)

The above is the detailed content of What are the pseudo-classes in css. For more information, please follow other related articles on the PHP Chinese website!