Pseudo Class Selectors in CSS

What is Pseudo Class in CSS?

  • It is used to apply the style on the special state of the HTML element.

  • Pseudo-classes are used to style HTML elements when a user mouse over.

  • Used to style the visited and unvisited links.

  • Used to style the different HTML elements on different states.


This will be our basic boilerplate code for CSS Pseudo Classes

index.html

<!DOCTYPE html>
<html>
<head>
    <title> CSS Pseudo Classes </title>
    <style>
       
    </style>
</head>
<body>

</body>
</html>


List of Pseudo Classes in CSS

i) :hover

It is used to style the element on mouse hover.

a:hover {
         color: #e65b00;
        }


ii) :link

Used to style all the unvisited links.

a:link {
         color: blue;
       }


iii) :visited

Used to style all the visited links.

a:visited {
         color: purple;
        }


iv) :active

It is used to style the active link.

a:active {
         color: red;
      }


v) :first-child

This will style the first child element of the parent.

ul:first-child {
            color: red;
        }


vi) :last-child

This will style the last child element of the parent.

ul:last-child {
            color: red;
            }


viii) :nth-child(n)

This will select every nth child element of parent element.

li:nth-child(odd) {
                color: red;
        }


ix) :nth-last-child(n)

This will select every n child element of the parent element from the last.

ul:nth-last-child(even){
                color: red;
        }


x) :nth-last-of-type(n)

This will select every n element of its parent from the last child.

li:nth-last-of-type(odd) {
                color: hotpink;
        }


xi) :nth-of-type(n)

This will select every n element of the parent.

li:nth-of-type(2) {
              background-color: red;
        }


xii) p:only-of-type

This will select every <p> element that is only <p> element of its parent.

p:only-of-type {
              color: yellow;
}


xiii) :first-of-type

This will select every 1st element of the selected type of its parent.

p:first-of-type {
              color: purple;
              }


xiv) :last-of-type

This will select every last element of the selected type of its parent.

p:last-of-type {
            color: purple;
            }


xv) :empty

This will select the element which don't have any children.

li:empty {
         background-color: black;
        }


xvi) :focus

Select the input element that has focus.

input:focus {
            background-color: lightblue;
        }


xvii) :checked

Select every checked input element.

input:checked {
            border: none;
             outline: 2px solid #eb65b00;
        }


xviii) :disabled

Select every disabled input element.

input[type="text"]:disabled {
            color: #e65b00;
        }


xix) :enabled

Select every enabled input element.

input:enabled {
            color: #e65b00
        }


xx) :required

This will select the input element which has required attribute.

input:required {
            border: 2px solid #e65b00;
        }


xxi) :optional

Select the input element with no required attributed.

input:optional {
            border: 2px solid #e65b00;
        }


xxii) :read-only

This will select every element with "readonly" attribute.

*:read-only {
            color: #e65b00;
        }


xxiii) :valid

This will select every <input> elements with a valid value.

input:valid {
            background-color: #e65b00;
            outline: 2px solid #fff;
        }


xxiv) :invalid

This will select every element with "readonly" attribute.

input:invalid {
            background-color: purple;
            outline: 2px solid hotpink;
        }


xxv) :root

This will select the root element of the document.

:root {
       --main-color: #e65b00;
        }


CSS Pseudo Classes Examples

<!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> CSS Grid Item Property </title>
    <style>

        li:nth-child(odd) {
            color: red;
        }

        li:nth-last-of-type(odd) {
            color: hotpink;
        }

        li:empty {
            background-color: black;
        }
    </style>
</head>
<body>

    <ul>
        <li> First </li>
        <li> Second </li>
        <li></li>
        <li> Third </li>
        <li> Fourth </li>
        <li> Fifth </li>
        <li> Sixth </li>
        <li> Seventh </li>
        <li> Eight </li>
        <li> Ninth </li>
        <li> Tenth </li>
    </ul>

</body>
</html>

Output: 

css pseudo classes examples

CSS Pseudo Classes Cheat Sheet PDF 

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad