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 

Post a Comment

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

Top Post Ad

Below Post Ad