Home 〉 CSS Tutorials 〉 CSS Pseudo-Classes Explained with Examples | Complete Guide for Beginners
CSS Pseudo-Classes Explained with Examples | Complete Guide for Beginners !
CSS Pseudo-Classes Explained with Examples | Complete Guide for Beginners !
Ever wanted to style an element only when it’s hovered or clicked? CSS pseudo-classes like `:hover`, `:focus`, and `:nth-child()` help you target elements based on user interaction or their state. They're perfect for adding interactivity without JavaScript. You can also use them to style form inputs, links, and lists smartly.
In this tutorial, we'll explore CSS pseudo-classes — a powerful way to style HTML elements based on their state, user actions, or position in the DOM.
Note: We've already covered CSS selectors in our tutorial 'CSS Syntax and Selectors Explained'.
- ':hover'
- ':link'
- ':visited'
- ':active'
- ':target'
- ':first-child'
- ':last-child'
- ':nth-child(n)'
- ':nth-last-child(n)'
- ':nth-last-of-type (n)'
- ':nth-of-type (n)'
- ':only-child'
- ':only-of-type'
- ':first-of-type'
- ':last-of-type'
- ':lang'
- ':empty'
- ':not(selector)'
- ':focus'
- ':checked'
- ':disabled'
- ':enabled'
- ':required'
- ':optional'
- ':in-range'
- ':out-of-range'
- ':read-only'
- ':read-write'
- ':valid'
- ':invalid'
- ':default'
- ':root'
What is a Pseudo-Class in CSS?
A pseudo-class in CSS starts with a colon ':' and is used to define a special state of an element.
Syntax:
Syntax ✍
selector:pseudo-class {
property: value;
}
Common CSS Pseudo-Classes (With Examples)
':hover' - Mouse Hover
Applies styles when the mouse pointer is over an element.
Code : 1 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.para, .para1 { padding: 5px 30px; }
.para:hover { background-color: black; color: white;}
</style>
</head>
<body>
<p class="para">This is a Paragraph 1</p>
<p class="para1">This is a Paragraph 1</p>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 1
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The 'paragraph 1' turns black when hovered.
':link'
Selects all unvisited links (<a> elements with an href attribute that hasn't been clicked yet).
Code : 2 📝
<!DOCTYPE html>
<html>
<head>
<style>
.link-a:link { color: red; }
</style>
</head>
<body>
<a class="link-a" href="/post/css-tutorials/css-tutorials.html">Link</a> <br>
<a class="link-a" href="/post/css-tutorials/css-tutorials.html">Link1</a> <br>
<a href="/post/css-tutorials/css-tutorials.html">Link2</a> <br>
</body>
</html>
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':visited' - Visited Link
Styles links that have already been clicked.
Code : 3 📝
<!DOCTYPE html>
<html>
<head>
<style>
.link1:visited { color: red; }
</style>
</head>
<body>
<a class="link1" href="/post/css-tutorials/css-tutorials.html" target="_blank">Link</a> <br>
<a class="link1" href="/post/css-tutorials/css-tutorials.html" target="_blank">Link1</a> <br>
<a href="/post/css-tutorials/css-tutorials.html" target="_blank">Link2</a> <br>
</body>
</html>
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':active' - While Clicking
Styles the element during the moment it is being clicked
Code : 4 📝
<!DOCTYPE html>
<html>
<head>
<style>
.link2:active { color: red; }
</style>
</head>
<body>
<a class="link2" href="/post/css-tutorials/css-tutorials.html" target="_blank">Link</a> <br>
<a class="link2" href="/post/css-tutorials/css-tutorials.html" target="_blank">Link1</a> <br>
<a href="/post/css-tutorials/css-tutorials.html" target="_blank">Link2</a> <br>
</body>
</html>
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Changes the color of 'link2' class - while pressing. It will be applied while pressing (keep pressed this links and see the effect)
':target'
Selects the element with an id that matches the current URL fragment (used for targeting anchors).
Code : 5 📝
<!DOCTYPE html>
<html>
<head>
<style>
p:target { background-color: lightsalmon; }
</style>
</head>
<body>
<a class="link3" href="#goto1">Link1</a> <br>
<a class="link3" href="#goto2">Link2</a> <br>
<a href="#goto2">Link3</a> <br>
<a href="#">Link4</a> <br>
<p id="goto1">This is a para1</p>
<p id="goto2">This is a para2</p>
<p id="goto3">This is a para3</p>
<p>This is a para4</p>
</body>
</html>
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':first-child' - First Element
Targets the first child inside a parent.
Code : 6 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div1 p:first-child { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div1">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':last-child' - Last Element
Targets the last child inside a parent.
Code : 7 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div2 p:last-child { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div2">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':nth-child(n)' - Specific Position
Selects the nth child of a parent.
Code : 8 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div3 p:nth-child(1) { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div3">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':nth-last-child(n)'
Selects the nth child from the end of its parent, regardless of type.
Code : 9 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div4 p:nth-last-child(1) { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div4">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':nth-last-of-type(n)'
Selects the nth element of its type from the end within its parent.
Code : 10 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div5 p:nth-last-of-type(1) { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div5">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':nth-of-type(n)'
Selects the nth element of its type among its siblings (e.g., the 2nd <p>).
Code : 11 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div6 p:nth-of-type(1) { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div6">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':only-child'
Selects an element that is the only child of its parent.
Code : 11 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div7 p:only-child { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div7">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<div>
<p>This is a Paragraph 3</p>
</div>
<div>
<p>This is a Paragraph 3</p>
<p>This is a Paragraph 4</p>
</div>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
This is a Paragraph 3
This is a Paragraph 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':only-of-type'
Selects an element that is the only one of its type among its siblings.
Code : 13 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div8 p:only-of-type { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div8">
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<div>
<p>This is a Paragraph 3</p>
</div>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':first-of-type'
Selects first element of a specific type.
Code : 14 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div9 p:first-of-type { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div9">
<div>
<h3>This is a Heading</h3>
<p>This is a Paragraph 1</p>
</div>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
</div>
</body>
</html>
output 📌
This is a Heading
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':last-of-type'
Selects last element of a specific type.
Code : 15 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div10 p:last-of-type { background-color: lightsalmon; }
</style>
</head>
<body>
<div class="div10">
<div>
<h3>This is a Heading</h3>
<p>This is a Paragraph 1</p>
</div>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
</div>
</body>
</html>
output 📌
This is a Heading
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':empty' - No Children
Applies styles to elements that have no children or content.
Code : 16 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div11 p:empty { border: 1px solid gray; width: 40%;}
</style>
</head>
<body>
<div class="div11">
<h3>This is a Heading</h3>
<p></p>
<p>This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
</div>
</body>
</html>
output 📌
This is a Heading
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':not(selector)' - Exclude Elements
Selects everything except the specified selector.
Code : 17 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div12 p:not(.temp) { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div12">
<p class="temp">This is a Paragraph 1</p>
<p>This is a Paragraph 2</p>
<p>This is a Paragraph 3</p>
</div>
</body>
</html>
output 📌
This is a Paragraph 1
This is a Paragraph 2
This is a Paragraph 3
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':lang(language)'
Matches elements based on their lang attribute (e.g., :lang(en) for English content).
Code : 18 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div13 p:lang(en) { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div13">
<p lang="en">This is English Language</p>
<p lang="fr">This is France Language</p>
<p lang="de">This is German Language</p>
</div>
</body>
</html>
output 📌
This is English Language
This is France Language
This is German Language
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':focus' - On Focus
Applies styles when an element is focused, like input fields.
Code : 19 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div15 input:focus { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div15">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is regular input text</label> <input type="text"> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This style will be applied while inputing / focused.
':disabled'
Targets all disabled input elements.
Code : 20 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div16 input:disabled { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div16">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is disabled input text</label> <input type="text" disabled> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':enabled'
Targets all enabled input elements.
Code : 21 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div17 input:enabled { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div17">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is disabled input text</label> <input type="text" disabled> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':required'
Target all Input Elements who has 'required' attributes. 'required' attribute means this field should not be empty.
Code : 22 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div18 input:required { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div18">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is required input text</label> <input type="text" required> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':optional'
Target all Input Elements who does not have 'required' attributes .
Code : 23 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div19 input:optional { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div19">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is required input text</label> <input type="text" required> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':in-range'
Applies styles to <input> elements when their value is within a valid range defined by min and max.
Code : 24 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div20 input:in-range { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div20">
<label>Enter between 1-10: </label>
<input type="number" min="1" max="10" > <br>
<label>Enter between 11-20: </label>
<input type="number" min="11" max="20" >
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':out-of-range'
Applies styles to <input> elements when their value is outside the defined min or max range.
Code : 25 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div21 input:out-of-range { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div21">
<label>Enter between 11-20: </label>
<input type="number" min="11" max="20" > <br>
<label>Enter between 1-10: </label>
<input type="number" min="1" max="10" >
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':read-only'
Selects form elements that cannot be edited by the user (i.e., readonly attribute is present).
Code : 26 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div22 input:read-only { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div22">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is 'readonly' input text</label> <input type="text" readonly> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':read-write'
Selects form elements that the user can modify (i.e., not readonly).
Code : 27 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div23 input:read-write { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div23">
<label>This is regular input text</label> <input type="text"> <br>
<label>This is 'readonly' input text</label> <input type="text" readonly> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':valid'
Targets form elements whose value passes validation constraints (like required, pattern, etc.).
Code : 28 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div24 input:valid { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div24">
<label>Enter a valid 'email-id'</label> <input type="email"> <br>
<label>This is regular input text</label> <input type="text"> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':invalid'
Targets form elements that fail HTML validation rules.
Code : 29 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div25 input:invalid { background-color: lightsalmon;}
</style>
</head>
<body>
<div class="div25">
<label>Enter a valid 'email-id'</label> <input type="email"> <br>
<label>This is regular input text</label> <input type="text"> <br>
<label>This is regular input text</label> <input type="text">
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':checked' - Form Elements
Targets checked radio or checkbox inputs.
Code : 30 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div26 input:checked { box-shadow: 2px 2px 5px red;}
</style>
</head>
<body>
<div class="div26">
<input type="checkbox" name="Red" id="Red"> <label for="red">Red</label>
<input type="checkbox" name="Green" id="Green"> <label for="Green">Green</label>
<input type="checkbox" name="Blue" id="Blue"> <label for="Blue">Blue</label>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':default'
Selects the default form element in a group (e.g., a default radio button or submit button).
Code : 31 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div27 input:default { box-shadow: 2px 2px 5px red;}
</style>
</head>
<body>
<div class="div27">
<input type="checkbox" name="Red" id="Red"> <label for="red">Red</label>
<input type="checkbox" name="Green" id="Green" checked> <label for="Green">Green</label>
<input type="checkbox" name="Blue" id="Blue"> <label for="Blue">Blue</label>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
':root' - Document Root
The ':root' is used to define variables in CSS.
Code : 32 📝
<!DOCTYPE html>
<html>
<head>
<style>
:root { --color : lightsalmon; }
.div28 p { background-color: var(--color); }
</style>
</head>
<body>
<div class="div28">
<h3>This is Heading</h3>
<p>This is Paragraph 1</p>
<p>This is Paragraph 2</p>
</div>
</body>
</html>
output 📌
This is Heading
This is Paragraph 1
This is Paragraph 2
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Why Use Pseudo-Classes?
- Create interactive styles without JavaScript
- Style elements based on user actions
- Apply styles conditionally (like form states or list positions)
Conclusion
CSS pseudo-classes are essential for dynamic styling. They help you react to user behavior (hover, focus), target elements based on position (':nth-child'), or state (':checked', ':disabled').
By mastering pseudo-classes, you make your website more interactive and user-friendly.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
- HTML Anchor Tag ('<a>') - Syntax, Attributes, and Examples for Beginners
- HTML div and span Tag Explained with Examples - Complete Guide
- HTML Heading Tag Tutorial with Examples | H1 to H6 Tags Explained
- HTML input Tag - Types, Attributes, Syntax, and Examples
Related Topics:
- CSS Pseudo-Elements Explained with Examples | Beginner-Friendly Guide
- CSS Selectors Explained: Element, Class, ID, Group, Descendant & Universal | Beginner's Guide
- CSS Combinators Explained with Examples | Child, Descendant, Sibling Selectors
- CSS Attribute Selectors Explained with Examples | Beginner Friendly Guide
Frequently Asked Questions (FAQs)
What is a pseudo-class in CSS?
A pseudo-class lets you apply styles based on the state or position of an element, such as ':hover' or ':first-child'.
Can I use multiple pseudo-classes on the same element?
Yes. Example: 'a:hover:active' will apply when both conditions are true.
What's the difference between ':nth-child()' and ':nth-of-type()'?
- ':nth-child()' targets based on position regardless of type.
- ':nth-of-type()' targets elements of the same type in a position.