21 - Pseudo Classes

A keyword added to a selector that specifies a special state of the selected elements(s) state = hover , click like stuff

Example

<a href="https//www.google.com">GOOGLE</a>

by default this hyperlink is blue , but we can change that by add this css code :

a:link {
	color:green;
}

after we visiting a link it become purple color, we can add our custom color to that too :

a:visited{
	color: red;
}

We can add color change when mouse hover over it by adding this css code :

a:hover{
	color: grey;
}

---

nth-child( )

The :nth-child() pseudo-class in CSS allows you to select elements based on their position among a group of sibling elements. Here’s how it works in detail:

First we need list items :

<ul>
	<li>This is element #1</1i>
	<li>This is element #2</1i>
	<li>This is element #3</1i>
	<li>This is element #4</1i>
	<li>This is element #5</1i>
	<li>This is element #6</1i>
</ul>

and here is the css code associated with nth-child() property

li:nth-child(1){
	background-color: yellow;
}

What happens here is each <li> element considered as a child and we call call them using their order number. in the above code 1st li element’s background color will turn Yellow.

this is use full with JavaScript cuz we can replace arguments with Js Variable.

---

we can use these functions too : odd : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

even:Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.