CSS preseudo class and pseudo elements are used to define a specific state or part of an HTML element. They can be used to style an HTML link on hover or active state or an input element with specific attribute like readonly or disabled. These elements allow you to style specific HTML elements in general without adding a unique id or a class with relative ease.
CSS pseudo-class is used to style an HTML element in a specifc state. The syntax for pseudo-class is shown below.
selector:pseudo-class {
property:value;
}
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Pseudo-classes can be used with CSS classes and ids too.
.highlight:hover {
color: #ff0000;
}
Pseudo-class can be used to create a tooltip effect too.
<div class="handle">
Hover over me
<span>
This is a simple tooltip effect.
</span>
</div>
<style>
.handle{
position: relative;
padding: 5px 15px;
background: #096;
color: #fff;
width: 150px;
text-align: center;
cursor: pointer;
margin-bottom: 10px;
}
.handle span{
display: none;
position: absolute;
background: #333;
width: 220px;
padding: 3px 10px;
border-radius: 20px;
left: 110%;
top: 10%;
}
.handle span:after{
content: '';
position: absolute;
top: 8%;
left: -7px;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 20px solid #333;
}
.handle:hover span{
display: block;
}
</style>
The first-child pseudo-class is used to style the first child element of a parent element. Similarly, last-child can be used to style the last child element while nth-child allows you to style a child element using the number of order.
<ul class="style-child">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<style>
.style-child{
max-width: 200px;
border: 1px solid #ccc;
padding: 10px;
list-style: none;
}
.style-child li:first-child{
color: #f00;
}
.style-child li:nth-child(3){
color: #096;
}
.style-child li:last-child{
color: #096;
}
</style>
| Pseudo Class Selector | Description |
|---|---|
| :active | Selects the active link |
| :checked | Selects checked <input> elements |
| :disabled | Selects disabled <input> elements |
| :empty | Selects elements that has no children |
| :enabled | Selects enabled <input> elements |
| :first-child | Selects first child of specified parent element |
| :first-of-type | Selects first element of defined type (mostly used with odd or even value) of specified parent element |
| :focus | Selects the <input> element that is focused |
| :hover | Selects links on mouse over |
| :in-range | Selects <input> elements with a value within a specified range |
| :invalid | Selects all <input> elements with an invalid value |
| :last-child | Selects last child element of specified parent element |
| :last-of-type | Selects specified element of defined type that is the last element of its parent |
| :link | Selects all unvisited links |
| :not(selector) | Selects every element that is not the defined element |
| :nth-child(n) | Selects element that is the nth child of its parent where n is the number |
| :nth-last-child(n) | Selects element that is the nth child of its parent counting from the last child |
| :nth-last-of-type(n) | Selects element that is the nth element of its parent counting from the last child |
| :nth-of-type(n) | Selects element that is the defined type of child element of its parent |
| :only-of-type | Selects element that is the only specified type of element of its parent |
| :only-child | Selects element that is the only child of its parent |
| :optional | Selects <input> elements without "required" attribute |
| :out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | Selects <input> elements with "readonly" attribute |
| :read-write | Selects <input> elements without "readonly" attribute |
| :required | Selects <input> elements with "required" attribute |
| :root | Selects the document's root element |
| :target | Selects the target element defined in the link |
| :valid | Selects all <input> elements with valid value |
| :visited | Selects all visited links |
<a href="#demo">Click this link to see the target styled</a>
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<style>
:target{
color: #f00;
}
#demo{
border: 1px solid #ccc;
padding: 10px;
}
</style>
CSS pseudo-element is used to style specified parts of an element line fist-line or first-letter of an element or some selected areas or before or after the element. The syntax of CSS Pseudo-elements is shown below.
selector::pseudo-element {
property:value;
}
Double colon is used to define pseudo-elements to distinguish them from pseudo-classes. Single colon is also supported though.
The CSS pseudo-element first-line is used to add a special style to the first line of a text.
p::first-line {
font-variant: small-caps;
}
CSS pseudo-element first-letter is used to add a special style to the first letter of a text.
p::first-letter {
color: #f00;
}
CSS pseudo-elements can also be used with CSS classes and ids.
.intro::first-line {
color: #f00;
}
CSS pseudo element before can be used to insert some content and display it before an element in web pages.
<ul class="demo-list">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
<style>
.demo-list li::before{
content: url(logo-icon.png);
margin-right: 10px;
}
</style>
CSS pseudo element after can be used to insert some content and display it after an element in web pages.
<h3 class="demo-h3">Demo Content</h3>
<style>
.demo-h3::after{
content: url(logo-icon.png);
margin-left: 10px;
}
</style>
CSS pseudo element selection can be used to style the portion of an element that is selected by a user.
Select any text from the paragraph below to see what pseudo-element selection can do.
Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p class="select">Lorem ipsum dolor sit amet, consectetur adipisicing elit
tempor incididunt ut labore et dolore magna aliqua.</p>
<style>
.select::selection {
color: red;
background: yellow;
}
</style>
Leave a comment