CSS pseudo-classes

This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Today we are going to look at CSS pseudo-classes.

Pseudo classes are used to add special effects to some selectors.

The difference between pseudo-classes and pseudo-elements

Some people don’t know the difference between a pseudo-class and a pseudo-element, so let’s talk about that first. The main, core difference is whether or not new elements are created. A colon: is used for upper pseudo-classes, and two colons are used for pseudo-elements ::

Pseudo classes complement the selectors, so to speak, by having no labels on the page but actually existing in the Dom document.

A pseudo-element is a new element created that does not exist in the Dom document and does not really exist, but is yet another element that can load content.

pseudo-classes

status-indicating

pseudo-classes describe
:link All unvisited links
:visited All the links that have been visited
:hover When the mouse is placed over the label
:active Click the label status
:focus The style of the tag when it gets focus

Example: Let’s use the classic A tag as an example

 <body>
     <a href="https://juejin.cn/user/3562846812382206">Romantic code farmers</a>
     <a href="www.baidu.com">baidu</a></a>
 </body>
 <style>
     /* Make the hyperlink black before clicking */
     a:link {
         color: black;
     }
     /* Make the hyperlink blue */
     a:visited {
         color: blue;
     }
     /* When you hover over the label, it turns green */
     a:hover {
         color: green;
     }
     /* When the mouse clicks on the link, but does not let go */
     a:active {
         color: red;
     }
 </style>
Copy the code

Effect:

Note: these four states must be written in a fixed order: A: Link, a:visited, a:hover and a:active decrease in priority successively, which is the so-called law of love and hate.

Structured pseudo-class

pseudo-classes example An example
:first-of-type p:first-of-type Each selected p element is the first p element of its parent element
:last-child p:last-child Selects the last child of all p elements
:last-of-type p:last-of-type Select that each p element is the last p element of its parent element
:not(selector) :not(p) Select all elements other than p
:nth-child(n) p:nth-child(2) Select the second child of the parent element of all p elements
:nth-last-child(n) p:nth-last-child(2) Select the second-to-last child of all p elements
:nth-last-of-type(n) p:nth-last-of-type(2) Select the second-to-last child of all p elements that is P
:nth-of-type(n) p:nth-of-type(2) Select the second child of all p elements that is P
:only-of-type p:only-of-type Select all elements that have only one child p
:only-child p:only-child Select all p elements that have only one child
:first-child p:first-child The selector matches those belonging to the first child of any element

The element
:root root Select the root element of the document
:target #main:target Select the current active #main element (click on the name of the anchor contained in the URL)

The form class

pseudo-classes example An example
:checked input:checked Select all selected form elements
:disabled input:disabled Select all disabled form elements
:empty p:empty Select all p elements that have no children
:enabled input:enabled Select all enabled form elements
:valid input:valid Select properties for all valid values
:out-of-range input:out-of-range Selects element attributes for values outside the specified range
:invalid input:invalid Select all invalid elements
:optional input:optional Select the element attribute that does not have “required”
:read-only input:read-only Select the element attribute of the read-only attribute
:read-write input:read-write Select element attributes that do not have read-only attributes
:in-range input:in-range Selects values within the range specified by the element
:required input:required Select the element attribute specified by the “required” attribute

Language class

pseudo-classes example An example
:lang(language) p:lang(it) for

The lang attribute of the element selects a starting value
:dir An element that matches the writing direction of a particular text

Example:

 <body>
     <p lang="main">hello</p>
     <p>Romantic code farmers</p></p>
 </body>
 <style>
    p:lang(main) {background: burlywood;
    }
 </style>
Copy the code

🥰 is at the end

There are omissions welcome big guy to supplement.

💌 The haze covered the sun this morning, but don’t be afraid, the sun is still in the clouds. 📬