Table of contents

Foreword:

In the previous article, we introduced some common selectors in detail. In these articles, we will introduce a common selector in CSS—pseudo-class selector. There are many types of it. I hope you can have a better grasp of it.

Pseudo class selector:

A pseudo-class selector is a special way of selecting elements in CSS, specified by using a colon (:) and a pseudo-class name after the selector. Pseudo-class selectors can select elements with a specific state or condition, not just based on static attributes such as tag names or class names.

Pseudo-class selectors can be used in conjunction with other selectors to more precisely select and apply styles to different elements in a document.

TIPS:
Pseudo-classes are not classes, they are just a special state of elements. Pseudo-classes are powerful and flexible tools in CSS. They allow us to design more interactive and dynamic styles according to different states and positions of elements.

Common pseudo-class selectors:

1.:hover (hover state) When the mouse hovers over the element, you can define a specific style for the element. For example, you can change the color or background color of a link when the mouse is over it:

   a:hover {
     color: red;
     background-color: yellow;
   }

2. :active (activated state):
When the element is activated (for example, clicked), a specific style can be applied. This pseudo-class is typically used on buttons or links to provide click feedback to the user:

 button:active {
     background-color: green;
     color: white;
   }

3. :focus (focus state):
When the element gets the focus, a specific style can be applied. Mainly used on form elements to highlight the currently focused element while the user is typing:

   input:focus {
     border: 2px solid blue;
   }

4. :visited (visited link):
Select the visited link and set a specific style for it. This is often used to change the color of visited links so users can distinguish which links have already been clicked:

   a:visited {
     color: purple;
   }

5. :first-child (the first child element):
Select the first child element of the parent element and set the style for it. This can be used to select the first element in a list or other situations where the first child element needs to be highlighted:

   li:first-child {
     font-weight: bold;
   }

6. :last-child (the last child element):
Select the last child element of the parent element and set a style for it. This can be used to select the last element in a list or other situations where the last child element needs to be highlighted:

 li:last-child {
     margin-bottom: 0;
   }

7. :nth-child(n) (the nth child element):
Select the child element at a specific position in the parent element and set a style for it. You can use this pseudo-class selector to apply styles based on the position of child elements, where n is a number indicating the position:

    p:nth-child(2) {
     color: blue;
   }

The above example will select the second `<p>` element within the parent element and set its text color to blue.

Example:

For example, if we create an a tag, we all know that if the a tag is accessed, it will turn purple, and when it is not accessed, it will be blue. At this time, if we want the a tag to be red when it is not accessed , it will be normal purple when it is accessed . We can't do it with the knowledge we learned before!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

          a{
            color: red;
          }
        
  </style>
</head>
<body>

  <a href="https://www.bilibili.com/" target="_blank">去哔哩哔哩</a>
</body>
</html>

result:

We found that whether we have visited this link, the text "Go to Bilibili" is always red regardless of whether we have visited it or not, which cannot achieve the results we wanted before, so we introduced the concept of pseudo-class selectors, using pseudo-class selectors to select elements with specific states or conditions.

Correct spelling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
        /* 选中的是没有访问过的A */
          a:link{
            color: red;
          }
        
  </style>
</head>
<body>

  <a href="https://www.bilibili.com/" target="_blank">去哔哩哔哩</a>
</body>
</html>

Before visiting:

After visiting:

Tips:

When our pseudo-class selector modifies the a tag, we generally have a fixed order, which is link->visited->hover->active

This is because this order ensures that style rules are applied correctly.

The :link pseudo-class selector applies to unvisited links, and it specifies the link style by default. This pseudo-class is usually placed first, because it is the most basic state, and the default style should be defined first.
The :visited pseudo-class selector applies to links that have already been visited, which specifies the style of the visited link. It follows `:link`, because the two pseudo-selectors are for different states of the same element.
The :hover pseudo-class selector is applied to the state when the mouse is hovering over the link, which specifies the style of the link when the mouse is hovering. It comes first because the hover state is sometimes an important state for a user to interact with a link.
The :active pseudo-class selector applies to the state when the link is activated (such as mouse down or key down), it specifies the style of the link when it is activated. It usually comes last because it represents the transient state of the link and is not retained after the user interaction is complete.

Writing style rules in this order ensures that linked styles are applied as expected. In addition, this order also conforms to the general usage habits and developer conventions, which helps the readability and maintainability of the code.

If you do not modify the state of the a tag in this order, some modifications may not appear normally.

For example:

We want the a label to be red when the mouse is over, and green when the mouse is clicked, so we should strictly abide by this order: put hover in front of active:

          a:hover{
            color: red;
          }
          
          a:active{
            color: darkgreen;
          }

If the order is reversed, the tab will not be green when it is active.

It should be noted that not all pseudo-class selectors must be arranged in this order. This order is more applicable to the pseudo-selectors of `a` tags, pseudo-selectors for other elements may have different ordering conventions.

Summarize:

In this chapter, we introduce the pseudo-class selector in detail, which allows us to specifically modify the different states of the label. It is a very practical selector, but at the same time it has a variety of types, so we need to remember more.

If my content is helpful to you, please like, comment and bookmark . Creation is not easy, everyone's support is my motivation to persevere!

[Learn CSS from scratch | Part 2] Pseudo-class selectors