What are Pseudo Class Selectors?

Leave a Comment

Learn Using Pseudo Class Selectors

There are many special states of some elements, and if you want to show these elements differently to the user, then pseudo classes comes into the picture.

You can define selectors with the help of the pseudo-class, and apply the css for that special state.

For example. on hovering any link or element we can use :hover pseudo class which will be applied only when the mouse is over that element or link. We can define the css as below

a:hover {
    text-decoration:none;
    border-bottom:1px solid red;
}

This will override the default behavior of links on mouse over from underline to border in bottom.

There are other such states, which may depend on user’s history with the page (:visited) or status of a check box (:checked or :disabled) or list items state (:last-child, if its last item in list)

Below are some commonly used pseudo-classes:

:active, :checked, :disabled, :first-child, :last-child, :focus, :hover, :nth-child, :visited

Leave a Reply