CSS Pseudo Classes

❮ Prev Next ❯

Pseudo classes are predefined keywords that are used to select an element based on its state , or to target a specific child.

They start with a single colon :.

They can be used as part of a selector, and they are very useful to style active or visited links for example, change the style on hover, focus, or target the first child, or odd rows. Very handy in many cases.

What are Pseudo-classes?

Pseudo-classes are special keywords that are added to selectors to style elements based on their state or position.

They allow you to apply styles to elements in response to user interactions, such as hovering over links, clicking on buttons, or even targeting specific elements based on their position within a list.

These are the most popular pseudo classes you will likely use:

Pseudo class Targets
:active an element being activated by the user (e.g. clicked). Mostly used on links or buttons
:checked a checkbox, option or radio input types that are enabled
default the default in a set of choices (like, option in a select or radio buttons)
disabled an element disabled
empty an element with no children
enabled an element that's enabled (opposite to :disabled )
:first-child the first child of a group of siblings
:focus the element with focus
:last-child the last child of a group of siblings
:link a link that's not been visited
:not() any element not matching the selector passed. E.g. :not(span)
:nth-child() an element matching the specified position
:nth-last-child() an element matching the specific position, starting from the end
:only-child an element without any siblings
:required a form element with the required attribute set
:root represents the html element. It's like targeting html , but it's more specific. Useful in CSS Variables.
:target the element matching the current URL fragment (for inner navigation in the page)
:valid form elements that validated client-side successfully
:visited a link that's been visited

Let's do an example. A common one, actually. You want to style a link, so you create a CSS rule to target the a element:

Example: 


a {
  color:yellow;
}

Things seem to work fine, until you click one link. The link goes back to the predefined color (blue) when you click it. Then when you open the link and go back to the page, now the link is blue.

Why does that happen?

Because the link when clicked changes state, and goes in the :activestate. And when it's been visited, it is in the :active state. Forever, until the user clears the browsing history.

So, to correctly make the link yellow across all states, you need to write

Example: 


a
a:visited,
a:active {
  color :yellow;
}

The adjacent sibling selector, represented by the :nth-child() deserves a special mention. It can be used to target odd or even children with :nth-child(odd)and :nth-child(even)

It is commonly used in lists to color odd lines differently from even lines: 


ul:nth-child(odd) {
  color :white;
  background-color :black;
}

:hover Pseudo-class

The :hoverpseudo-class is perhaps the most commonly used pseudo-class. It applies styles to an element when the user hovers their mouse over it. This is often used to provide visual feedback to users and enhance interactivity. 


button:hover {
  background-color:#3498db;
}

:active Pseudo-class

The :activepseudo-class applies styles to an element when it is being activated, such as when a button is clicked. It is useful for providing immediate feedback to users when they interact with clickable elements. 


button:active {
  transform:scale(0.9);
}

:focus Pseudo-class

The :focuspseudo-class applies styles to an element when it gains focus, typically through keyboard navigation or when clicked on. It is commonly used to style form elements like input fields and buttons to indicate that they are active or focused. 


input:focus {
  border-color :#2ecc71;
}

:nth-child() Pseudo-class

The :nth-child()pseudo-class selects elements based on their position within a parent element. It allows you to target specific children elements, such as odd or even elements, or elements at a specific index. 


li:nth-child(even) {
  background-color :#f2f2f2;
}

:not() Pseudo-class

The :not()pseudo-class selects elements that do not match a specified selector. It allows you to exclude specific elements from being styled, providing more precise control over your CSS rules. 


a:not(.external) {
  color :#3498db;
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      a,
      a:visited,
      a:active {
        color :yellow;
      } 
      
      ul:nth-child(odd) {
        color :white;
        background-color :black;
      } 
      
      button:hover {
        background-color:#3498db;
      } 

      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <div class="container">
        <h3>welcome to Coding Koleji </h3>
        <a class="www.codingkoleji.com">visit our website</a>
        <button>Click Me</button>
      </div>
      <div class=".container">
        <ul>
          <li>Mango</li>
          <li>Banana</li>
          <li>Orange</li>
        </ul>
      </div>
    </body>
  </html>

The pseudo-classes are powerful tools for styling elements based on their state or position within the document structure.

By mastering the various pseudo-classes available in CSS, you can create dynamic and interactive web designs that enhance the user experience.

Experiment with different pseudo-classes and selector combinations to achieve the desired styling effects and improve your CSS proficiency.

❮ Prev Next ❯