CSS Pseudo Class and Pseudo Elements

Pseudo Class or pseudo elements 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

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

How to write code?


<style>
	a:link{ color:red}
</style>
	<a href="#">Link</a>                                    

Hyperlink on a webpage

Link

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

How to write code?



<style>
	a:link{ color:red}                  /* Default color of a link*/
	a:visited{ color:yellow}            /* color of link after visit*/
	<a href="#">Link</a>                                    

Hyperlink on a webpage


Link



:active

:active class works only when user mouse left key is clicked, as soon as he remove.

How to write code?


<style>
	a:link{ color:red}                  /* Default color of a link*/
	a:visited{ color:yellow}            /* Changed color of a link after visited*/
	a:active{ color:gray}            /* Changed color of a link on being click*/
</style>

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

Hyperlink on a webpage


Link



:hover

:hover class works when user mouseover the element. On mouseout, it comes back to its original form.

How to write code?


<style>
	a:link{ color:blue}                  /* Default color of hyperlink*/
	a:visited{ color:yellow}             /* hyperlink color after visit*/
	a:active{ color:gray}                /* hyperlink color on being click*/
	a:hover{ color:red}                  /* Changed color on mouseover*/
</style>

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

( :hover on a webpage)


Link



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

How to write code?


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

<input type="text" /> 
	<input id="text1" type="text" />
	<a href="#">Link</a>                                    

Hyperlink on a webpage

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 Dafault Anchor with focus


:first-line

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

How to write code?


<style>
	p{ color:blue}      		/* For Entire Para tag*/
	p:first-line{ color:red}        /* For First line of the Para 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-line on a webpage)


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.


:first-child

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

How to write code?


<style>
	ul li{ color:blue}						/*For all list Items*/
	ul li:first-child{ color:yellow}				/*For First listed Item*/
</style>

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

(:before child on a webpage)

  • One
  • Two
  • Three
  • Four
  • Five

:first-letter

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

How to write code?


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

(:first-letter on a webpage)

This is a paragragh


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

How to write code?


<style>
	.list li:before{ content:"Q No: " }    
</style>
	<ul>								/* List without :before */
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>    

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

(How :before looks on a webpage)

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

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

How to write code?


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

<ul>								/* List without :after */
		<li>Para 1</li>
		<li>Para 2</li>
		<li>Para 3</li>
		<li>Para 4</li>
		<li>Para 5</li>
	</ul>    

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

(How :after looks on a webpage)

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

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

CSS3 Selectors