Pseudo-classes and all CSS Classes


The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc.

Pseudo-classes

The following are some key Pseudo-classes −

  • :active = To select the active link

  • :checked = To select every checked <input> element

  • :first-child = To select the first child of an element’s parent

  • :first-of-type = To select the first element of its parent

  • :focus = To select the element that has focus

  • :hover = To select links on mouse over

  • :link = To select all unvisited links

  • :not(selector) = Selects every element that is not a <p> element

  • :nth-of-type(n) = To select an element that is the second element of its parent

  • :only-of-type = To select an element that is the only element of its parent

  • :only-child = To select an element that is the only child of its parent

  • :out-of-range = To select elements with a value outside a specified range

  • :valid = To select elements with a valid value

  • :visited = To select all visited links

Manipulate links with CSS Pseudo-classes

When we create a link using the <a> element, then various pseudo classes are used to set the link color, visited link color, hover , active link, etc. We have achieved the same using the pseuso-classes −

a:link {
   color: rgb(17, 0, 255);
}
a:visited {
   color: rgb(128, 0, 107);
}
a:hover {
   color: rgb(255, 105, 243);
}
a:active {
   color: rgb(255, 153, 0);
}

Example

Let us see now see the code −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      a {
         font-size: 18px;
         font-weight: bold;
      }
      a:link {
         color: rgb(17, 0, 255);
      }
      a:visited {
         color: rgb(128, 0, 107);
      }
      a:hover {
         color: rgb(255, 105, 243);
      }
      a:active {
         color: rgb(255, 153, 0);
      }
   </style>
</head>
<body>
   <h1>Pseudo class example</h1>
   <a href="#">This is some sample link text</a>
   <h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>

The nth-of-type pseudo class

In this example, we have set different background colors based on the nth-of-type() pseudo class −

child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}

Example

Let us see an example −

<!DOCTYPE html>
<html>
<head>
   <title>CSS Inline-level Elements and Inline Boxes</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      .child{
         color: white;
         border: 4px solid black;
      }
      .child:nth-of-type(1){
         background-color: #FF8A00;
      }
      .child:nth-of-type(2){
         background-color: #F44336;
      }
      .child:nth-of-type(3){
         background-color: #C303C3;
      }
      .child:nth-of-type(4){
         background-color: #4CAF50;
      }
      .child:nth-of-type(5){
         background-color: #03A9F4;
      }
      .child:nth-of-type(6){
         background-color: #FEDC11;
      }
   </style>
</head>
<body>
   <form>
   <fieldset>
   <legend>CSS Inline-level Elements and Inline Boxes</legend>
   <div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>

The :focus pseudo class

To select the element that has focus, use the :focus pseudo class. Here, on focus, the search field will display an outline around search box for the users to enter a search keyword −

.searchField:focus {
   outline: 3px solid #ddd;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      .dropbtn {
         background-color: rgb(76, 78, 175);
         color: white;
         padding: 16px;
         font-size: 16px;
         border: none;
         cursor: pointer;
      }
      .dropbtn:hover, .dropbtn:focus {
         background-color: #4f3e8e;
      }
      .searchField {
         box-sizing: border-box;
         font-size: 16px;
         padding: 14px 20px 12px 45px;
         border: none;
         border-bottom: 1px solid #ddd;
      }
      .searchField:focus {outline: 3px solid #ddd;}
      .dropdown {
         position: relative;
         display: inline-block;
      }
      .dropdownList {
         display: none;
         position: absolute;
         background-color: #f6f6f6;
         min-width: 230px;
         overflow: auto;
         border: 1px solid #ddd;
         z-index: 1;
      }
      .dropdownList a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
      }
      .dropdown a:hover {background-color: #ddd;}
      .show {display: block;}
   </style>
</head>
<body>
   <h1>Search/filterText Dropdown Example</h1>
   <div class="dropdown">
      <button class="dropbtn" onclick="showDropList()">Dropdown</button>
      <div id="myDropdown" class="dropdownList">
         <input type="text" placeholder="Search.." class="searchField">
         <a href="#">Cow</a>
         <a href="#">Cat</a>
         <a href="#">Dog</a>
         <a href="#">Giraffe</a>
         <a href="#">Lion</a>
         <a href="#">Leopard</a>
         <a href="#">Cheetah</a>
      </div>
   </div>
   <script>
      function showDropList(){
         let dropDiv = document.querySelector('.dropdownList');
         if(dropDiv.style.display==="block"){
            dropDiv.style.display = "";
         } else {
            dropDiv.style.display = "block";
         }
      }
      document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
      function filterDropdown() {
         var inputSearch, filterText, ul, li, links, i,div;
         inputSearch = document.querySelector(".searchField");
         filterText = inputSearch.value.toUpperCase();
         div = document.getElementById("myDropdown");
         links = div.getElementsByTagName("a");
         for (i = 0; i < links.length; i++) {
            txtValue = links[i].textContent || links[i].innerText;
            if (txtValue.toUpperCase().indexOf(filterText) > -1) {
               links[i].style.display = "";
            } else {
               links[i].style.display = "none";
            }
         }
      }
   </script>
</body>
</html>

Updated on: 26-Dec-2023

121 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements