In this CSS tutorial, we will be going through the concept of Pseudo-classes and how we use them. And by the end of this tutorial, you will have a brief idea about what are pseudo-classes and how many of them are present in CSS.
What are Pseudo-classes?
A pseudo-class defines the state of an element, and using it we can have different styling for the same element at different states. An element can have more than one states, for instance, the element has a different state when a mouse hover it, or a list can have different states where it is clicked or visited.
Syntax
This is the syntax of a pseudo-class.
selector:pseudo-class {
property: value;
}
Anchor tag Pseudo-classes
An anchor tag can have 4 different states, link, visited, hover and active .
- The link state defines the default state of the anchor tag which hasn’t clicked or visited.
- The visited state defines if the user has already clicked on the link.
- The hover state defines if the mouse is hovered over the link.
- The active state defines when the user clicks on the link.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
color: yellow;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<b><a href="https://www.techgeekbuzz.com" >TechGeekBuzz</a></b>
</body>
</html>
CSS Pseudo-classes and CSS classes
CSS class are generally used as a selector when we want the same styling for different elements with the same class name. And like other selectors, CSS classes can be used with pseudo-classes.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.homepage:hover {
color: green;
}
</style>
</head>
<body>
<b><a href="https://www.techgeekbuzz.com" class="homepage">
TechGeekBuzz
</a></b>
</body>
</html>
The hover: pseudo-class
The hover pseudo-class is not limited to the anchor tag, it can be used with any HTML element .
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: yellow;
background-color: blue;
}
p:hover {
color: white;
background-color: black;
}
</style>
</head>
<body>
<p>Welcome to TechGekkBuzz.</p>
</body>
</html>
Create a simple ToolTip using :hover pseudo-class
A simple ToolTip can be created using a : hover class and display:block property value pair.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
color: white;
background-color: black;
}
/*Activate display block when mouse hover over the div*/
div:hover p {
display: block;
}
</style>
</head>
<body>
<div> Hover Over Me!
<p>Welcome to TechGekkBuzz.</p>
</div>
</body>
</html>
CSS :first-class Pseudo-class
As the name suggests the pseudo-class :first-child define an element which is the first child of another element.
Syntax
p:first-child
{
property:value;
}
It will select all those paragraph which are the first child of their parent.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*Select all paragraphs which are the first child*/
p:first-child {
color: white;
background-color: black;
}
</style>
</head>
<body>
<p>First Child of body </p>
<p>Second Child of body </p>
<div>
<p>First Child of Div</p>
<p>Second Child of div</p>
</div>
</body>
</html>
CSS :lang Pseudo-class
Using : lang pseudo-class we can define different rules for different languages, for instance, if we want to change the double inverted comma(“ ”) of <q> tag with # hash symbol.
Example
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(hash) {
quotes: "#" "#";
}
</style>
</head>
<body>
<q lang="hash">This is a Quotation</q>
</body>
</html>
Pseudo-Classes Lists
There are more than 60 pseudo-classes present in CSS. And there are many which are not supported by most of the browsers. So before using a pseudo-class make sure that it is supported by every browser.
| Pseudo-class | Example | Description |
| :active | a:active | Define the <a> state when the user click on it. |
| :checked | input:checked | Define if the input box is checked. |
| :disabled | input:disabled | It select those input elements which are disabled. |
| :empty | div:empty | Select those div element which do not have any children. |
| :enabled | input:enabled | Select all enabled input elements. |
| :first-child | p i:first-child | Select all the <i> elements which are the first children of a <p> element. |
| :first-of-type | p:first-of-type | Select the first <p> element if it is a child. |
| :focus | input:focus | Define the input state when user click on it. |
| :hover | a:hover | Define the element state when the user hovers the mouse over the <a> tag. |
| :in-range | input:in-range | Define the input state if value is in specified range. |
| :invalid | input:invalid | Select those input elements which are not valid. |
| :lang( language ) | q:lang(hash) | Select the <q> element with has an attribute of lang with value hash. |
| :last-child | p:last-child | Select all <p> elements if it is the last children of its parent. |
| :last-of-type | p:last-of-type | Selects the last <p> child of every parent element. |
| :link | a:link | Define the <a> element state when it is unclick or unvisited. |
| :not(selector) | :not(div) | Select all elements except <div> |
| :nth-child(n) | p:nth-child(3) | Selects those <p> elements which are the 3 rd child of their parent. |
| :nth-last-child(n) | p:nth-last-child(3) | Selects those <p> elements which are the 3 rd last element of their parent. |
| :nth-last-of-type(n) | p:nth-last-of-type(3) | Select the 3 rd last <p> element of its parent. |
| :nth-of-type(n) | p:nth-of-type(3) | Select the 3 rd <p> element of its parent. |
| :only-of-type | p:only-of-type | Select those <p> elements if they are the single <p> element of their parents. |
| :only-child | p:only-child | Select those <p> elements which are the single child of their parents. |
| :optional | input:optional | Select those input boxes with no require attribute. |
| :out-of-range | input:out-of-range | Select the input boxes whose value is out of range. |
| :read-only | input:read-only | Select input boxes with read only attribute |
| :read-write | input:read-write | Select input boxes with no readonly attribute |
| :required | input:required | Select input boxes with required attribute |
| :root | root | Select the root element. |
| :target | #goto:target | Selects the #goto element which is linked to an anchor tag with id “goto”. |
| :valid | input:valid | Select input boxes with valid |
| :visited | a:visited | Define the anchor tag if it is visited. |
CSS Pseudo-Class Summary
- pseudo-classes define the different state of an element.
- It can be used for providing different styling for different states for the same element.
- pseudo-class can work with any type of CSS selector.
People are also reading: