Pseudo Selectors

Pseudo Selectors specify a special state of current selector. Pseudo Selectors are divided into Pseudo Class and Pseudo elements. To use pseudo selectors, colen (:) 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 Classes

  • :link
  • :visited
  • :active
  • :focus
  • :hover

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 an 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.



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

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

:active

:active pseudo class works only when mouse left key is pressed, as soon as he released mouse key, :active stops.


<style>
a:link{ color:red}                  
a:visited{ color:yellow}            
a:active{ color:gray}            
</style>

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

:hover

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


<style>
	a:link{ color:blue}                  
	a:visited{ color:yellow}             
	           
	a:hover{ color:red}    
	a:active{ color:gray}                
</style>

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

: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.

click on first text box and then next, or press TAB key to see focus effect

Dafault Text Box

Text Box with changed focus

Link 1 Link 2 Dafault 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 psudo element works only for the first line of a paragraph or text.

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


<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>                                    

Before and After

:before and :after are Pseudo Elements which allow us to insert content into html, without write in html code. The content is visible is web browser, but not in source code. Actually :before and :after insert content in DOM. content property is compulsory in both :before and :after.

We can also use ::before or ::after. Both works on all mordern browsers.

before and after selectors are not supported in I.E 7 and below.

before and after selectors are valid for PAIR TAGS ONLY. They are not valid for non-pair elements, like img, input etc.

css before after
CSS Before and After Pseudo Selectors

:before

:before is used to add some content before element through css without affecting the Markup. before was introduced in css 2.1 and is supported on Internet Explorer 8 and above. before content is treated as child of same element. :before is inline.

CSS Before example

  • 11
  • 12
  • 13
  • 14
  • 15

<style>
    .list li:before{ content:"Q No: " }    
</style>   

<ul class="list">		
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>	

carat icon using before




    <style>
        button:before{
            content:"";
            display:inline-block;
            border-style:6px solid;
            border-color:white transparent transparent transparent;
        }
    </style>
    
    <button>Dropdown</button>
             

quotes using before

This is a Quote



    <style>
        p{
            text-align:center;
        }
        p:before{
            content:open-quote;
        }
        p:after{
            content:close-quote;
        }
    </style>
    
    <p>This is a Quote<p>
             

:after

:after is used to add some content after an html tag, without any change in HTML Markup. After was also introduced in css 2.1 with before.:after is also inline.

css after example

  • Para 1
  • Para 2
  • Para 3
  • Para 4
  • Para 5

<style>
	.list li:after{ content:"." }    
</style>
   

    <ul class="list">				/* List with :after */
		<li>Para 1</li>
		<li>Para 2</li>
		<li>Para 3</li>
		<li>Para 4</li>
		<li>Para 5</li>
	</ul>	

Clear both using after

  • List 1
  • List 2
  • List 3
  • List 4
  • List 5

    <style>   
        ul{
            list-style:none;
        }
        ul li{
            float:left;
            margin-right:10px;
        }
        ul:after{
            content:"";
            clear:both;
            display:block;
        }   
    </style>
    
    <ul>
        <li>List 1<li>
        <li>List 2<li>
        <li>List 3<li>
        <li>List 4<li>
        <li>List 5<li>
    <ul>
             

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

CSS3 Selectors