CSS Pseudo-classes and Pseudo-elements


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

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

Pseudo-classes for HTML <a> element

/* 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.

Hover over me This is a simple tooltip effect.
<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>

CSS - Pseudo-class first-child, last-child and nth-child

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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<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>

List of CSS Pseudo Classes

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

:target Example

Click this link to see the target styled
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.
<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-elements

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.

CSS Pseudo-elements - first-line

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

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

CSS pseudo element before can be used to insert some content and display it before an element in web pages.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
<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

CSS pseudo element after can be used to insert some content and display it after an element in web pages.

Demo Content

<h3 class="demo-h3">Demo Content</h3>
<style>
.demo-h3::after{
  content: url(logo-icon.png);
  margin-left: 10px;
}
</style>

CSS Pseudo-element - selection

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>