An Overview of CSS Pseudo-Selectors: Adding Dynamic Styles to Your Pages

CSS pseudo-selectors are special selectors that select elements based on their state or relationship with other elements. In this article, we will discuss the different types of pseudo-selectors in CSS.

:active

The :active selector selects an element that is currently being activated by the user. For example, when a user clicks on a button, it becomes active until the click is released. The :active selector can be used to style the active state of an element.

  //HTML
  <button>Click Me</button>


 //CSS
  button:active {
    background-color: blue;
    color: white;
  }

:hover

The :hover selector selects an element when the user hovers over it with the mouse. This selector is commonly used to add styles to an element when the mouse is over it, such as changing the background color or increasing the font size.

  //HTML
  <button>Click Me</button>


  //CSS
  button:hover {
    background-color: blue;
    color: white;
  }

:focus

The :focus selector selects an element that has received focus. This selector is used to style elements when they receive focus, such as input fields or buttons. The :focus selector is particularly useful for accessibility purposes, as it helps to indicate to users which element has focus.

  
  //HTML
  <button>Click Me</button>
  
  
  //CSS 
  button:focus {
    background-color: blue;
    color: white;
  }
  

:visited

The :visited selector selects an element that has been visited. This selector is commonly used to style links that have already been visited by the user. It is important to note that the :visited selector only works with links, and the styles applied to visited links are subject to certain restrictions for privacy reasons.

  
  //HTML
  <a href="https://pinoyfreecoder.com">
  https://pinoyfreecoder.com</a>
  
  
  //CSS
  a:visited {
    background-color: blue;
    color: white;
  }
  

:first-child

The :first-child selector selects the first child of an element. This selector is useful for styling the first element of a list or a container, such as the first paragraph of an article.

  //HTML
  <p>first element</p>


  //CSS
  p:first-child {
    font-weight: bold;
    color: blue;
  }

:last-child

The :last-child selector selects the last child of an element. This selector is useful for styling the last element of a list or a container, such as the last paragraph of an article.

  //HTML
  <ul>
    <li>first element</li>
    <li>second element</li>
    <li>third element</li>
    <li>last element</li>
  </ul>


  //CSS
  li:last-child {
    font-weight: bold;
    color: blue;
  }

:nth-child

The :nth-child selector selects an element that is the nth child of its parent. This selector is useful for styling specific elements of a list or a container, such as every other list item or every third paragraph.

  //HTML
  <ul>
    <li>first element</li>
    <li>second element</li>
    <li>third element</li>
    <li>last element</li>
  </ul>


  //CSS
  li:nth-child(2) {
    font-weight: bold;
    color: blue;
  }

In conclusion, pseudo-selectors provide a powerful way to select and style elements based on their state or relationship with other elements. By using these selectors, you can add dynamic styles to your pages that respond to user interactions and the structure of the document.