CSS Pseudo Class and Pseudo Elements

What is Pseudo class/elements

Pseudo Class change properties of element on a particular event, like mouseover, focus etc.
Pseudo Elements are used to call particular child of parent, like first-line, first-letter etc.

Pseudo Classes

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

Pseudo Elements

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

a:link.

:link Pseudo class is used to give properties to a link ( a link means a valid anchor tag with href attribute)

How to write code?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	a:link{ color:red}
</style>
</head>
<body>
	<a href="#">Link</a>                                    
</body>
</html>

Hyperlink on a webpage

Link

:visited

:visited class works only when you have already clicked that link .

How to write code?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	a:link{ color:red}                  /* Default color of a link*/
	a:visited{ color:yellow}            /* Changed color of a link after visited*/
</style>
</head>
<body>
	<a href="#">Link</a>                                    
</body>
</html>

Hyperlink on a webpage


Link



:active

:active class works only when user press mouse left click, As soon as he leave, it goes.

How to write code?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<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>
</head>
<body>
	<a href="#">Link</a>                                    
</body>
</html>

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?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	a:link{ color:blue}                  /* 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*/
	a:hover{ color:red}                  /* Changed color on mouseover*/
</style>
</head>
<body>
	<a href="#">Link</a>                                    
</body>
</html>

( :hover on a webpage)


Link



:focus

:focus class works only when we focus that element. It works only for inputs and anchors.

How to write code?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	#text1:focus{ outline:none; border:2px solid red}    
</style>
</head>
<body>
	<input type="text" /> 
	<input id="text1" type="text" />
	<a href="#">Link</a>                                    
</body>
</html>

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?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	p{ color:blue}      		/* For Entire Para tag*/
	p:first-line{ color:red}        /* For First line of the Para tag*/
</style>
</head>
<body>
	<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>                                    
</body>
</html>

( :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?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	ul li{ color:blue}						/*For all list Items*/
	ul li:first-child{ color:yellow}				/*For First listed Item*/
</style>
</head>
<body>
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
		<li>Four</li>
		<li>Five</li>
	</ul>                                 
</body>
</html>

(: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?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	p{ color:blue; font-size:16px}
	p:first-letter{ font-size:24px; color:red}    
</style>
</head>
<body>
	<p>This is a paragraph</p>                                    
</body>
</html>

(:first-letter on a webpage)

This is a paragragh


:before

:before is used to add some content on your page without affecting the Markup.

How to write code?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	.list li:before{ content:"Q No: " }    
</style>
</head>
<body>
	<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>	
</body>
</html>

(How :before looks on a webpage)

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

:after

:after add some content after that tag has been closed, without any change on HTML Markup.

How to write code?


<! doctype html>
<html>
<head>
<title>HTML Link</title>
<style>
	.list li:after{ content:" ends here." }    
</style>
</head>
<body>
	<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>	
</body>
</html>

(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