CSS Pseudo-classes

CSS Pseudo-classes: A pseudo-class can be defined as a catchphrase which is combined to a selector that defines the special condition of the chose elements. It is added to the selector for adding an effect to the current elements dependent on their states. For instance, The “:hover” is used for adding special effects to an element when the user moves the cursor over the element.

In this tutorial, you will learn-

In this article, you will learn-

1 What are Pseudo-classes?
2 Syntax
3 Anchor Pseudo-classes
4 CSS Links
5 Pseudo-classes and CSS Classes
6 Pseudo-classes and CSS Classes
7 Hover on <div>
8 Simple Tooltip Hover
9 CSS – The :first-child Pseudo-class
10 Match the first <p> element
11 Match the first <i> element in all <p> elements
12 All CSS Pseudo Classes
13 All CSS Pseudo Elements

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For instance, it can can be used to:

• Style an element when a user mouses over it

• Style visited and unvisited links differently

• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classes

Links can be shown in various ways:

Example

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="css-tutorial" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

CSS Links

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

At the point when you hover over the link in the example, it will change color:

Example

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and CSS Classes</h2>
<p>When you hover over the first link below, it will change color:</p>

<p><a class="highlight" href="css-syntax">CSS Syntax</a></p>
<p><a href="css-tutorial">CSS Tutorial</a></p>

</body>
</html>

Pseudo-classes and CSS Classes

When you hover over the first link below, it will change color:

CSS Syntax

CSS Tutorial

Hover on <div>

An instance of using the :hover pseudo-class on a <div> element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip);

Hover over a <div> element to show a <p> element (like a tooltip):

Hover over me to show the <p> element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over me to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

CSS – The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Match the first <p> element

In the accompanying example, the selector matches any <p> element that is the first child of any element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

</body>
</html>

Match the first <i> element in all <p> elements

In the accompanying example, the selector matches the first <i> element in all <p> elements:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>Welcome <i>to </i> CSS. Welcome <i>to </i> Css.</p>
<p>Welcome <i>to </i> CSS. Welcome <i>to </i> CSS.</p>

</body>
</html>

Match all <i> elements in all first child <p> elements

In the accompanying example, the selector matches all <i> elements in <p> elements that are the first child of another element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>Welcome <i>to </i> CSS. Welcome <i>to </i> Css.</p>
<p>Welcome <i>to </i> CSS. Welcome <i>to </i> CSS.</p>

</body>
</html>

CSS – The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for various languages. In the example beneath, :lang defines the quotation marks for <q> elements with lang=”no”:

Example

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with “it”
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no “required” attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a “readonly” attribute specified
:read-write	input:read-write	Selects <input> elements with no “readonly” attribute
:required	input:required	Selects <input> elements with a “required” attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before every <p> element
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
::selection	p::selection	Selects the portion of an element that is selected by a user

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.