User Action Pseudo-Classes in CSS

:link, :hover, :visited, :active and :target

User action pseudo-classes in CSS are a group of selectors that allow you to style elements based on user interactions or actions with those elements. These pseudo-classes help you create interactive and responsive web designs by applying different styles when users perform specific actions.

:hover : This pseudo-class targets elements when the user hovers their cursor over them. It's often used to provide visual feedback, such as changing colors or adding animations, when the user interacts with an element.

:focus : This pseudo-class targets elements that have keyboard focus or are currently selected by the user, such as form inputs. It's used to style elements that are currently intractable through keyboard input.

:visited : This pseudo-class targets links that the user has already visited. It's used to style visited links differently from unvisited ones.

:link : is used to select and style unvisited links. In other words, it targets links that have not been clicked or visited by the user. When a user clicks a link, it typically transitions from the :link state to the :visited state.

:target : is used to select and style an element that is the target of a fragment identifier in the URL. When a URL contains a fragment identifier and an element on the page has a corresponding id attribute, that element becomes the target.

Source Code :

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

    <style>
      a {
        color: tomato;
        text-decoration: underline;
      }
      a:link {
        background-color: #333;
        padding: 5px 10px;
      }
      a:hover {
        color: yellow;
      }
      a:visited {
        color: lime;
      }
      a:active {
        color: aqua;
      }

      p:target {
        background-color: coral;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: tomato;
        transition: 1s ease;
      }
      div:hover {
        background-color: green;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h3>User Action Pseudo Classes</h3>

    <p>:link :hover :visited :active :target</p>

    <a href="http://www.google.com/">Google</a>
    <a href="https://www.youtube.com/">Youtube</a>
    <a href="https://www.facebook.com/">Facebook</a>
    <a href="https://www.tutorjoes.com/" target="_blank">Tutor Joes</a>
    <hr />

    <a href="#home">Home</a>
    <a href="#product">Product</a>
    <a href="#about">About</a>
    <hr />
    <p id="home">
      <b>Home</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid rerum labore quia nobis natus a facilis sapiente sunt, enim officia rem doloribus dolorum quidem atque velit. Corporis dolorum non atque voluptatum minima distinctio nihil reiciendis ad quia ipsum a ex et delectus sit
      impedit, quas qui voluptatibus maxime? Voluptas, repudiandae.
    </p>
    <p id="product">
      <b>Product</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid rerum labore quia nobis natus a facilis sapiente sunt, enim officia rem doloribus dolorum quidem atque velit. Corporis dolorum non atque voluptatum minima distinctio nihil reiciendis ad quia ipsum a ex et delectus
      sit impedit, quas qui voluptatibus maxime? Voluptas, repudiandae.
    </p>
    <p id="about">
      <b>About</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid rerum labore quia nobis natus a facilis sapiente sunt, enim officia rem doloribus dolorum quidem atque velit. Corporis dolorum non atque voluptatum minima distinctio nihil reiciendis ad quia ipsum a ex et delectus
      sit impedit, quas qui voluptatibus maxime? Voluptas, repudiandae.
    </p>

    <div></div>
  </body>
</html>

Live Preview

The provided CSS code is a set of styles that apply to HTML elements on a web page.

a: This selector applies styles to all <a> elements on the page.
a:link: This selector targets unvisited links.
a:hoverThis selector targets links when the user hovers over them.
a:visitedThis selector targets visited links.
a:targetThis selector targets a <p> element when it is the target of a fragment identifier in the URL
a:hoverThis selector targets divs when the user hovers over them.

In summary, this code sets various styles for links (<a> elements) based on their state (unvisited, hovered, visited, active), changes the background color of a targeted paragraph (<p>) when it's the target of a fragment identifier, and applies a hover effect to <div> elements, transitioning their background color and giving them a circular shape when hovered.