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-

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

SelectorExampleExample description
:activea:activeSelects the active link
:checkedinput:checkedSelects every checked <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> elements that is the first child of its parent
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the <input> element that has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects <input> elements with a value within a specified range
:invalidinput:invalidSelects 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-childp:last-childSelects every <p> elements that is the last child of its parent
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
:linka:linkSelects 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-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
:only-childp:only-childSelects every <p> element that is the only child of its parent
:optionalinput:optionalSelects <input> elements with no “required” attribute
:out-of-rangeinput:out-of-rangeSelects <input> elements with a value outside a specified range
:read-onlyinput:read-onlySelects <input> elements with a “readonly” attribute specified
:read-writeinput:read-writeSelects <input> elements with no “readonly” attribute
:requiredinput:requiredSelects <input> elements with a “required” attribute specified
:rootrootSelects the document’s root element
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all <input> elements with a valid value
:visiteda:visitedSelects all visited links

All CSS Pseudo Elements

SelectorExampleExample description
::afterp::afterInsert content after every <p> element
::beforep::beforeInsert content before every <p> element
::first-letterp::first-letterSelects the first letter of every <p> element
::first-linep::first-lineSelects the first line of every <p> element
::selectionp::selectionSelects 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.


0 Comments

Leave a Reply

Avatar placeholder