CSS — Pseudo Class

CSS Pseudo Class

A pseudo-class is used to define a special state of an element like when we hover the mouse over the button or when we click on a link and much more.

Look at some pseudo-classes.
To get the mouse hover effect:

p:hover {
 text-decoration: underline;
 color: red;
}

Hover Effect

To change something when a link is visited:

a:visited {
 color: red;
}

Before Clicking

After Clicking

If you have some same elements on your webpage and you want to select a specific element inside of those elements, then you can do this:

p:nth-of-type(3) {
 background-color: green;
}

Styling specific element by it’s number

To select only checked checkboxes:

input:checked {
 margin-left: 100px;
}

Styling Inputs

To select the first letter on an element:

p:first-letter {
 font-size: 50px;
}

Selecting First Letter and Styling it

Google “CSS pseudo-class” for more information.

Instructor ~ TARUN KUMAR

LAZY SYNTAX