CSS Pseudo Selectors | Pseudo Class and Elements

Pseudo Selectors in css

Pseudo Selectors in css specify a special state of current selector. Pseudo Selectors are divided as Pseudo Class and Pseudo elements. To use pseudo selectors, colon (:) is used after selector.

Pseudo Class can change properties of an element on particular event, like mouseover, focus etc.

Pseudo Elements are used to call particular child of parent, like first-line, first-letter etc.

Pseudo Class and Pseudo Elements

Pseudo Elements

:first-line
:first-letter
:first-child
:before
:after

:link.

:link pseudo class is used to change properties of an unvisited link. once clicked, the link pseudo property will not show as link is visited. Default link color is blue. link pseudo class was introduced in css level 1.

Link


<style>
	a:link{ color:red}
</style>

<a href="#">Link</a>

:visited

:visited pseudo class works only when a hyperlink is visited. Default color of visited hyperlinks is purple. visited pseudo classcan change color and properties of visited links. visited pseudo class was also introduced in css level 1.

Visited Link



<style>
a:link{ color:red}                /* Unvisited Link*/
a:visited{ color:orange}          /* Visited Link*/
</style>

<a href="#">Link</a>

:active

:active pseudo class works when mouse left key is pressed, as soon as he released mouse key, :active stops. On touch devices, :active will works on touch.


<style>            
button:active{ background:blue}            
</style>

<button>Active</button>

:hover

:hover class works when user mouseover on an element. On mouseout, it comes back to its original form. :hover is meant for non touch devices only. On touch devices, :hover will conflict with :active.


<style>  
    button{ background:white}                
    button:hover{ background:blue; color:white}    
    button:active{ background:red; color:white}                
</style>

<button>Hover</button>

:focus

:focus class change style of an element only when that element is focused. All hyperlinks and form controls support focus. Both mouse and tab key can focus an element.

Default Text Box

Text Box with changed focus

Link 1 Link 2 Default Anchor with focus


<style>
   #name{ }
    #name:focus{ outline:none; border:2px solid red} 
    a:focus{ outline: 2px dotted blue;}
</style>

<input type="text" > 
<input id="name" type="text" >
<a href="#">Link 1</a>                                    
<a href="#">Link 2</a>

:first-line

:first-line pseudo element works only for the first line of a paragraph or text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nulla, magni reprehenderit fugiat suscipit repellat necessitatibus nisi doloremque ratione dolores assumenda? Illum tempore aspernatur ipsam excepturi distinctio quia tenetur impedit.


<style>
p{ color:blue}      	    /* For p tag*/
p:first-line{ color:red}    /* First line of p tag*/
</style>

<p>Inteligula congue id elis donec sce sagittis intes id laoreet aenean leo sem massawisi condisse leo sem ac. Tincidunt nibh quis dui fauctor et.</p>

:first-child

:first-child pseudo element selects first child of the parent only. Means only first child of parent will follow this class.

One
Two
Three
Four
Five


<style>
ul li{ color:blue}                 /* For all li elements*/
ul li:first-child{ color:yellow}   /* Only First li*/
</style>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

:first-letter

:first-letter pseudo element is used to select the first letter of a text element.

This is a paragragh


<style>
	p{ color:blue; font-size:16px}
	p:first-letter{ font-size:24px; color:red}    
</style>

<p>This is a paragraph</p>

To see more pseudo class and pseudo elements introduced in css3, click below

CSS3 Selectors