Pseudo Selector Property in CSS

A pseudo-class is used to define a special state of an element. Used for

when a user mouses over it
visited and unvisited links differently
when it gets focus

Pseudo Selectors

root
first-child
last-child
nth-child
nth-of-type
only-child
only-of-child
first-of-type
last-of-type
empty
not
Pseudo Class
target
attribute selector
is

Root

The :root selector matches the document's root element.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root{
      --bgcolor:aliceblue;
      --color:teal;
    }
    h1{
      color:var(--color);
    }
    p{
      padding: 10px;
      background-color:var(--bgcolor);
      color:var(--color);
    }
  </style>
</head>
<body>
    <h1>:root pseudo selector</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At incidunt, facilis nisi est, porro, culpa quas vitae quod commodi sint accusamus nobis iure aliquid? Suscipit praesentium at ipsam voluptatibus ullam voluptates error minus sunt corporis? Odio error facilis rerum, quo, sed dignissimos, neque quae eveniet assumenda dolore veniam placeat enim?</p>
</body>
</html>

Output

Live Preview

First Last Child

first-child

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

last-child

This :last-child selector matches every element that is the last child of its parent.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #list-1 li:first-child{
      color:blue;
    }

    li:last-child{
      color:red;
    }

    p:first-child{
      color:orangered;
    }
    p:last-child{
      color:brown;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector | first-child | last-child</h3>

  <ul id="list-1">
    <li>Lorem ipsum dolor sit amet consectetu-1</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu-6</li>
  </ul>
 
  <ul id="list-2">
    <li>Lorem ipsum dolor sit amet consectetu-1</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu</li>
    <li>Lorem ipsum dolor sit amet consectetu-6</li>
  </ul>
    <div>
    <p><b>Para-1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora iste esse atque exercitationem dicta, animi maiores quae eligendi nisi voluptatum.</p>
    <p><b>Para-2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora iste esse atque exercitationem dicta, animi maiores quae eligendi nisi voluptatum.</p>
    <p><b>Para-3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora iste esse atque exercitationem dicta, animi maiores quae eligendi nisi voluptatum.</p>
    </div>

</body>
</html>

Output

Live Preview

Nth Child Nth Last Child

This:nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
    #l1 li:nth-child(5){
      color:red;
      font-weight: bold;
    }
    /*
        n=0,1,2,3,4
        2n
          2*0=0
          2*1=2
          2*2=4
          2*3=6
        2n+1
          (2*0)+1=1
          (2*1)+1=3
          (2*2)+1=5
          (2*3)+1=7
        3n-1
          (3*0)-1=0
          (3*1)-1=2
          (3*2)-1=5
          (3*3)-1=8
    */
    #l2 li:nth-child(3n-1){
      color:navy;
      font-weight: bold;
    }
    #l2 li:nth-last-child(5){
      color:orange;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector | nth-child | nth-last-child</h3>

  <ul id="l1">
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
    <li>item-6</li>
    <li>item-7</li>
    <li>item-8</li>
    <li>item-9</li>
    <li>item-10</li>
  </ul>
  <ul id="l2">
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
    <li>item-6</li>
    <li>item-7</li>
    <li>item-8</li>
    <li>item-9</li>
    <li>item-10</li>
  </ul>
 
   
</body>
</html>

Output

Live Preview

Nth of type Nth Last of type

This :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p:nth-of-type(1){
      color:red;
    }
    p:nth-last-of-type(1){
      color:blue;
    }

    li:nth-of-type(1){
      color:red;
    }
    li:nth-last-of-type(1){
      color:blue;
    }

    .l2 li:nth-of-type(odd){
      color:purple;
    }
    .l2 li:nth-of-type(even){
      color:green;
    }

  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector | :nth-of-type | :nth-last-of-type</h3>

  <ul class="l1">
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
  </ul>
  <ul class="l2">
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
  </ul>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut error totam dolores! Necessitatibus recusandae dolorum voluptatem quos blanditiis perferendis aliquid.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut error totam dolores! Necessitatibus recusandae dolorum voluptatem quos blanditiis perferendis aliquid.</p>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut error totam dolores! Necessitatibus recusandae dolorum voluptatem quos blanditiis perferendis aliquid.</p>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut error totam dolores! Necessitatibus recusandae dolorum voluptatem quos blanditiis perferendis aliquid.</p>

</body>
</html>

Output

Live Preview

Only Child

This :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1) , but with a lower specificity.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li:only-child{
      color:red;
    }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector | :only-child</h3>

  <ul>
    <li>item-1</li>
  </ul>
  <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
  </ul>

</body>
</html>

Output

Live Preview

Only Of Type

The :only-of-type pseudo-class represents an element that has a parent element and whose parent element has no other element children with the same expanded element name.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  
  p:only-of-type{
    color: brown;
  }
  </style>
</head>
<body>
  <h1> :only-of-type</h1>

  
  <h5>Tutor Joes</h5>
 

  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>




</body>
</html>

Output

Live Preview

First Last Of Type

This :last-of-type selector matches every element that is the last child, of a particular type, of its parent.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      li:first-of-type{
        color:red;
      }
      li:last-of-type{
        color:green;
      }
      p:first-of-type{
        color:red;
      }
      p:last-of-type{
        color:green;
      }
  </style>
</head>
<body>
  <h3> :first-of-type | :last-of-type</h3>

  <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
  </ul>
  <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
  </ul>
  <p><b>Para-1</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>

  <p><b>Para-2 </b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>
  <p><b>Para-3 </b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>

  <hr>

  <div>
    <p><b>Div Para-1</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>

    <p><b>Div Para-2</b>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>
    <p><b>Div Para-3</b>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam maxime voluptates molestias alias quasi earum et modi officia, laboriosam eum.</p>
  </div>
</body>
</html>

Output

Live Preview

Empty

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace).

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p:empty{
      padding: 10px;
      border: 2px solid goldenrod;
    }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector |  :empty</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque rem soluta fugiat harum, veritatis consequuntur!</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque rem soluta fugiat harum, veritatis consequuntur!</p>

  <p></p>
</body>
</html>

Output

Live Preview

Not

This :last-of-type selector matches every element that is the last child, of a particular type, of its parent.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p.para{
      color:blue;
    }
    p:not(.para){
      color:red;
    }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector |  :not</h3>
  
  <p class="para">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur minus blanditiis impedit reprehenderit eaque, aperiam a exercitationem distinctio vel temporibus.
  </p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur minus blanditiis impedit reprehenderit eaque, aperiam a exercitationem distinctio vel temporibus.</p>
  <p class="para">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur minus blanditiis impedit reprehenderit eaque, aperiam a exercitationem distinctio vel temporibus.
  </p>
</body>
</html>

Output

Live Preview

Lang

The :lang() pseudo class selector in CSS matches elements based on the context of their given language attribute.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      p:lang(fr){
        color:blueviolet;
      }
      p:lang(en){
        color:red;
      }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector |  :lang</h3>

  <p lang="en">computer an electronic machine that can store, find and arrange information, calculate amounts and control other machines.</p>

  <p lang="fr">ordinateur une machine électronique capable de stocker, de trouver et d'organiser des informations, de calculer des montants et de contrôler d'autres machines.</p>

  <p lang="en">Tutor Joes</p>

</body>
</html>

Output

Live Preview

Pseudo Class

Pseudo-classes is a way to describe the state of the link or it gives effect to the anchor tag < a >. A user can show a link whether it has been visited by them previously or it is in a running state, We can also change the cursor sign when the mouse is over

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      div a{
        display: inline-block;
        width: 100px;
        height: 30px;
        background-color: aliceblue;
        text-align: center;
        line-height: 30px;
      }
      a:link{
        color:green;
      }
      a:hover{
        background-color: teal;
        color:white;
      }
      a:active{
         color:orangered;
      }
      a:visited{
         color:darkred;
      }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector <br> :link | :hover | :visited | :active </h3>

  <div>
    <a href="#l1">Link-1</a>
    <a href="#l2">Link-2</a>
    <a href="#l3">Link-3</a>
    <a href="#l4">Link-4</a>
  </div>



</body>
</html>

Output

Live Preview

Target

This pseudo-class :target is used to style the target element of a URL containing a fragment identifier.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      padding: 10px;
      background-color: aliceblue;
    }
    p:target{
      background-color: aquamarine;
      color:blue;
    }
  </style>
</head>
<body>
  <h3>CSS Pseudo Class Selector | :target</h3>
  <a href="#para1">Para-1</a>
  <a href="#para2">Para-2</a>
  <a href="#para3">Para-3</a>

  <p id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur natus dolores dolore sed quidem mollitia repudiandae corrupti a delectus veritatis quisquam adipisci at exercitationem quam corporis accusamus nemo, placeat quaerat?</p>
  <p id="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur natus dolores dolore sed quidem mollitia repudiandae corrupti a delectus veritatis quisquam adipisci at exercitationem quam corporis accusamus nemo, placeat quaerat?</p>
  <p id="para3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur natus dolores dolore sed quidem mollitia repudiandae corrupti a delectus veritatis quisquam adipisci at exercitationem quam corporis accusamus nemo, placeat quaerat?</p>
 


</body>
</html>

Output

Live Preview

Forms

This < form > element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #t1:focus{
      outline: none;
      border: 1px solid brown;
    }
    input[type="checkbox"]:checked{
        box-shadow: 0 0 0 3px red;
    }
    input[type="text"]:enabled{
        background-color: pink;
    }
    input[type="text"]:disabled{
        background-color: red;
    }
    input[type="text"]:required{
        background-color: green;
    }

    input[type="email"]:read-only{
        background-color: gray;
    }
    input[type="email"]:read-write{
        background-color: plum;
    }

    input[type='text']:invalid{
         border-color: red;
      }
      input[type='text']:valid{
         border-color: green;
      }

      input[type='radio']:default{
        box-shadow: 0 0 0 3px green;
      }

      option:default{
        color:red;
      }
  </style>
</head>
<body>
  <h3>Form CSS Pseudo Class Selector</h3>

  <span>:focus</span>
  <input type="text" id="t1">
  <hr>
  <span>:checked</span>

  <input type="checkbox" id="cricket">
  <label for="cricket">Cricket</label>

  <input type="checkbox" id="football">
  <label for="football">Football</label>

  <input type="checkbox" id="tennis">
  <label for="tennis">Tennis</label>

  <hr>
  <span>:enabled :disabled :required :optional</span>
  <br>
  <input type="text">
  <br>
  <input type="text" disabled>
  <br>
  <input type="text" required>
  <br>
  <hr>
  <span>:read-only | :read-write</span>
  <br>
  <input type="email">
  <br>
  <input type="email" readonly>
  <hr>
  <span>:valid | :invalid</span>
  <input type="text" placeholder="Enter Username" pattern="[a-z]*">
  <hr>
  <span>:default</span>
  <input type="radio" name="gender" id="male" checked>
  <label for="male">Male</label>
  <input type="radio" name="gender" id="female">
  <label for="female">Female</label>
  <br>
  <select>
    <option value="">Select</option>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="Java">Java</option>
    <option value="CSS" selected>CSS</option>
  </select>
</body>
</html>

Output

Live Preview

Is

This is a keyword added to a selector that lets you style a specific part of the selected element(s).

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #d1{
      background-color: aliceblue;
    }
    #d2{
      background-color: antiquewhite;
    }

    /* #d1 h2,
    #d1 h3,
    #d1 h4{
      color:red;
    } */

    #d1 :is(h2,h3,h4){
      color:blue;
    }

    #d1 h2,
    #d2 h2{
      color:brown;
    }

    :is(#d1,#d2) h2{
      color:green;
    }


    :is(#d1,#d2) h2{
      color:green;
    }

    :is(#d1,#d2) :is(h2,p){
      color:red;
    }

    :is(#d1,#d2) h2:hover{
      color:chocolate;
    }

  </style>
</head>
<body>
  <h3>:is() CSS Pseudo Class Selector</h3>

  <div id="d1">
      <h2>H2 - Heading One</h2>
      <h3>H3 - Sub Heading-1</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis consequuntur nisi praesentium quae esse quisquam earum debitis quaerat odio eaque.</p>
      <h4>H4 - Sub Heading-2</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id vitae obcaecati quae, amet illo debitis!</p>
  </div>
  <hr>
  <div id="d2">
    <h2>H2 - Heading Two</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis consequuntur nisi praesentium quae esse quisquam earum debitis quaerat odio eaque.</p>
  </div>

  <p><b>Outside</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, a nesciunt veniam mollitia accusantium fugit pariatur, quos alias dicta similique fuga possimus repellendus et amet!</p>
</body>
</html>