CSS Pseudo-classes

❮ Previous Next ❯

What are Pseudo-classes?

A pseudo-class is a way to describe a unique condition or situation of an element.

For example, it can be used to:

Change how something looks when a person moves their mouse over it.
Make sure that the links on your webpage have different styles for when someone has already visited them and when they haven't visited them yet.
Change how something looks when you click on it.

Mouse Over Me

Anchor Pseudo-classes

You can show links in various styles:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and HTML Classes

You can use pseudo-classes together with HTML classes.

When you move your mouse pointer over the link in the example, the color of the link will change:

Hover on <div>

An example of using the :hover pseudo-class on a <div> element:

Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip):

CSS - The :first-child Pseudo-class

The ":first-child" pseudo-class is used to select an element that happens to be the very first child of another element.

Match the first <p> element

In this example, the selector finds the very first

element within any other element.

Match the first <i> element in all <p> elements

In this example, we're selecting the very first <i> element inside every <p> element.

Match all <i> elements in all first child <p> elements

In this example, the selector is looking for all <i> elements inside <p> elements that are the first child of some other element.

CSS - The :lang Pseudo-class

The ":lang" pseudo-class helps you create specific rules for various languages in HTML.

In this example, the :lang code specifies how quotation marks should appear around elements that have the attribute lang="no":

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* unvisited link */
      a:link {
        color: red;
      }

      /* visited link */
      a:visited {
        color: green;
      }

      /* mouse over link */
      a:hover {
        color: hotpink;
      }

      /* selected link */
      a:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h2>Styling a link depending on state</h2>
    <p>
      <b>
        <a href="https://propertutorials.com/code-space/_css_css-pseudo-classes+1" target="_blank">This is a link</a>
      </b>
    </p>
    <p>
      <b>Note:</b> In CSS, for a link to change its appearance when hovered over, the "a:hover" rule should be placed after "a:link" and "a:visited" rules in the style. This sequence is important for the hover effect to work properly.
    </p>
    <p>
      <b>Note:</b>The CSS rule specifies that for it to work correctly, the ":active" state should be defined after the ":hover" state.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      a.highlight:hover {
        color: #ff0000;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <h2>Pseudo-classes and HTML Classes</h2>
    <p>When you place your cursor over the initial link, its color and font size will changed:</p>
    <p>
      <a class="highlight" href="https://propertutorials.com/css/css-full-form" target="_blank">CSS Syntax</a>
    </p>
    <p>
      <a href="https://propertutorials.com/css/css-introduction" target="_blank">CSS Tutorial</a>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: green;
        color: white;
        padding: 25px;
        text-align: center;
      }

      div:hover {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <p>Hover over the box below to change its background color to blue:</p>
    <div>Mouse Over Me</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        display: none;
        background-color: yellow;
        padding: 20px;
      }

      div:hover p {
        display: block;
      }
    </style>
  </head>
  <body>
    <div>Hover over this `div` element to display the `p` element. <p>Tada! Here I am!</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:first-child {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is some text.</p>
    <p>This is some text.</p>
    <div>
      <p>This is some text.</p>
      <p>This is some text.</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p i:first-child {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>I am a <i>strong</i> person. I am a <i>strong</i> person. </p>
    <p>I am a <i>strong</i> person. I am a <i>strong</i> person. </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:first-child i {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>I am a <i>strong</i> person. I am a <i>strong</i> person. </p>
    <p>I am a <i>strong</i> person. I am a <i>strong</i> person. </p>
    <div>
      <p>I am a <i>strong</i> person. I am a <i>strong</i> person. </p>
      <p>I am a <i>strong</i> person. I am a <i>strong</i> person. </p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      q:lang(no) {
        quotes: "~""~";
      }
    </style>
  </head>
  <body>
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text. </p>
    <p>In this instance, the :lang attribute specifies the language for quotation marks applied to q elements with lang="no".</p>
  </body>
</html>