CSS Pseudo Classes
Introduction
In CSS, pseudo-classes remove the requirement for additional classes or IDs to be added to HTML elements by selecting and styling items according to their status or placement within the document tree. These pseudo-classes are mainly employed to create dynamic and interactive styles for web pages.
Syntax
selector:pseudo-class {
property: value;
}
Important points about CSS Pseudo Classes
- A colon (:) is used to indicate the beginning of a pseudo-class, which comes after a selector. As an illustration, consider :hover, :focus, etc.
- Two brackets define the parameters in a functional pseudo-class. Take :lang() as an example.
- An anchor element is an element to which a pseudo-class is tied. As an illustration, consider button:hover, a:focus, etc. The anchor components, in this case, are buttons and elements.
- Pseudo-classes give an element style based on the document tree's contents.
- Additionally, pseudo-classes apply a style to an element based on external characteristics like the element's history of navigation (:visited), the content's state (:checked), or the mouse position (:hover).
Element Display State Pseudo-classes
Targeting and styling items according to their display state are the functions of pseudo-classes like :fullscreen, modal, and picture-in-picture.
This is an illustration of a :fullscreen pseudo-class:
<html>
<head>
<style>
.sample {
padding: 10px;
height: 200px;
width: 95%;
background-color: lightgrey;
}
.sample p {
visibility: hidden;
text-align: center;
color: black;
font-size: 2em;
}
.sample:fullscreen {
background-color: lightsalmon;
width: 100vw;
height: 100vh;
}
.sample:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>:fullscreen example</h2>
<div class="container">
<div class="sample" id="sample">
<p>Fullscreen mode</p>
</div>
<br>
<button onclick="var el=document.getElementById('sample'); el.webkitRequestFullscreen();">Click here</button>
</div>
</body>
</html>
This is an illustration of a :modal pseudo-class:
<html>
<head>
<style>
::backdrop {
background-image: url(border.png);
}
:modal {
border: 8px inset blue;
background-color: lightpink;
box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
</style>
</head>
<body>
<dialog>
<button autofocus>Close</button>
<p>The modal dialog has a beautiful backdrop!</p>
<p>And see my styling using :modal pseudo-class</p>
</dialog>
<button>Open the dialog</button>
<script>
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
dialog.close();
});
</script>
</body>
</html>
Input Pseudo-classes
These pseudo-classes allow the selection of elements based on their HTML characteristics and the state they are in before and after user interaction. Examples of the pseudo-classes that target and style the <input> elements are provided.
The following pseudo-classes also fall under this category: :read-only, :read-write, :placeholder-shown, :default, :checked, :indeterminate, :blank, :valid, :invalid, :in-range, :out-of-range, :required, :optional, and :user-invalid.
Linguistic Pseudo-classes
This group includes the pseudo-classes that mimic the document's language and allow elements to be chosen based on the language or script.
This is an illustration of a pseudo-class using :lang():
<html>
<head>
<style>
:lang(en) > q {
quotes: '""';
}
:lang(fr) > q {
quotes: '« ' ' »';
color: white;
background-color: steelblue;
}
div {
padding: 10px;
}
</style>
</head>
<body>
<h2>:lang() selector example</h2>
<div lang="en">
<q>This is an Example of linguistic pseudo classes </q>
</div>
<div lang="fr">
<q>This is an Example of linguistic pseudo classes </q>
</div>
</body>
</html>
Location Pseudo-classes
This group of pseudo-classes includes those that relate to links and targeted items within the current document.
These are the following: scope, :visited, :any-link, :link, and :target. Below are a few instances.
:visited
The: visited pseudo-class provides information about a visited :link. Just like the :link pseudo-class, the: visited pseudo-class can only be applied to anchor components that include the property.
Users can find out which links are visited and which are :unvisited with the help of the visited pseudo-class.
One can retrieve a user's history of web browsing by using the :visited pseudo-class and specialized programming.
The styles that can be set for visited links are, therefore, limited.
For example, browsers do not allow the background picture of a page to be altered. These limitations contribute to the protection of user privacy by preventing these scripts from accessing and retrieving links that have been viewed from the webpage.
Nevertheless, the following styles are permitted, and they are:
- : color
- :background-color
- : outline color
- : column rule color
All other styles are inherited from the link pseudo-class.
Overall, web designers can improve the usability of their websites by utilizing the visited pseudo-class, but caution should be exercised in its application to protect user security and privacy.
:link
On a website, links that still need to be clicked by the user can be styled and identified with the link pseudo-class. Every element with a property on an unvisited anchor is matched.
In particular, the :link pseudo-class requires that an element be both visited and active in order for it to work.
Active, visited, and hover pseudo-classes are examples of pseudo-classes that can override the style established by the :link pseudo-class.
This is an illustration of how to use :any-link to alter a link's background and foreground colors.
<html>
<head>
<style>
div {
padding: 5px;
border: 2px solid black;
margin: 1em;
width: 500px;
}
a:any-link {
font-weight: 900;
text-decoration: none;
color: green;
font-size: 1em;
}
.with-nohref {
color: royalblue;
}
.with-empty {
color: crimson;
}
</style>
</head>
<body>
<h3>:any-link example</h3>
<div>
anchor elements with href to javatpoint.com--
<a href="https://javatpoint.com">click here</a>
</div>
<div>
<a class="with-nohref">with no href</a>
</div>
<div>
<a href="#" class="with-empty">with empty href</a>
</div>
</body>
</html>
This is an illustration of the :link pseudo-class and the :hover pseudo-class:
<html>
<head>
<style>
a {
font-size: 1em;
padding: 5px;
display: inline-block;
margin-right: 10px;
}
a: link {
background-color: light yellow;
}
a: hover {
background-color: light salmon;
color: green;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<strong><a href="https://www.javatpoint.com">Javatpoint</a></strong>
<strong><a href="https://www.google.com">Google</a></strong>
</body>
</html>
Tree Structural Pseudo-classes
This group of pseudo-classes includes those that target elements according to their location in the document tree.
They are :root, :empty, :nth-child, :nth-last-child, :first-child, :last-child, :only-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type and :only-of-type. A few examples are shown below.
This is an illustration of the empty pseudo-class applied to the <p> tag:
<html>
<head>
<style>
p: empty {
width: 200px;
height: 30px;
background: magenta;
}
div {
border: 3px solid black;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<h2>:empty example</h2>
<div>
<p>Not an empty paragraph</p>
<p></p>
<p>Not an empty paragraph</p>
</div>
</body>
</html>
This example presents the first-child pseudo-class attached to the <p> tag, which is the child element of <div>. In this case other <p> elements in the same container won't be affected by the CSS rules, instead, only they will be effective for the very first <p> element which is located inside of a <div> element.
<html>
<head>
<style>
p:first-child {
color: black;
background: yellow;
font-weight: 600;
font-size: 1em;
font-style: italic;
padding: 5px;
}
div {
border: 2px solid black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div>Parent element
<p> First child looks different due to:first-child pseudo-class</p>
<p>second child, so no change</p>
</div>
<div>Parent element
<h2>h3 tag, so no change</h2>
<p><p> tag, but not the first child.</p>
</div>
</body>
</html>
This is an illustration of the only-of-type pseudo-class applied to the <p> and <h2> tags under the <div> parent element. The <div> parent container's <p> and <h2> type elements are the only ones to which the CSS rules in this example will apply.
<html>
<head>
<style>
.field {
margin: 1px;
padding: 1px;
}
p:only-of-type {
color: dark blue;
background-color: light pink;
padding: 5px;
}
h2:only-of-type {
text-decoration-line: underline;
color: green;
}
div {
border: 2px solid black;
width: 500px;
}
</style>
</head>
<body>
<div class="field">
<h2>Heading 2 - only type</h2>
<p>Paragraph tag - only type</p>
</div>
<div class="field">
<h2>Heading 2 - only type</h2>
<p>Paragraph tag 1 - we are two</p>
<p>Paragraph tag 2 - we are two</p>
</div>
</body>
</html>
User Action Pseudo-classes
For any of these pseudo-classes to apply the rule or styling, the user must engage in some way. For example, by clicking on an input field or dragging their cursor over a button.
These are the pseudo-classes :hover, :active, :focus, :focus-visible, and :focus-within. A few of the examples are displayed below.
:hover
The hover pseudo-class matches and adds extra effects to an element when the user hovers over it.
Hovering over an element often results in visual cues for the user, who can choose to activate it if needed.
The LVHA order is fully adhered to when the: hover pseudo-class takes effect following the application of the :link and :visited pseudo-classes preceding it.
With touch screens, the hover pseudo-class may cause issues. It might match immediately when the user touches the element, match only momentarily afterward, depending on the browser, or match even after the user quits touching until they contact another element.
:active
The :active pseudo-class is used to display the element as being in an active state. Most often, this pseudo-class is associated with the element <a> and <button>. Another common target of the pseudo-class is items that are contained within an activated state.
In CSS, the act of a user clicking an element with the mouse is called "activating." An element will cease to be active when the user stops clicking on it.
:focus
The focus pseudo-class describes an element that has been the subject of attention. It is applied to style an element that the mouse is now on or the keyboard is currently on.
An element is said to be in "focus" (such as when the cursor is blinking) when it is selected and open for text input. Users of keyboards can focus on them with the mouse and tab into them.
Here is an illustration of how to use a link with :focus:
<html>
<head>
<style>
a {
color: dark violet;
transition: all 0.3s ease;
}
a: focus {
outline: none;
color: red;
background-color: yellow;
}
body {
margin: 5px;
padding: 2rem;
display: grid;
font: 20px/1.4 system-ui, -apple-system, sans-serif;
}
</style>
</head>
<body>
<p>The link here has a <a href="#0">change in background and foreground color</a> as it is focused.</p>
</body>
</html>
This is an illustration of how to use focus-within to put focus on an input field's label.
<html>
<head>
<style>
label {
display: block;
font-size: 20px;
color: black;
width: 500px;
}
input[type="text"] {
padding: 10px 16px;
font-size: 16px;
color: black;
background-color: #fff;
border: 1px solid #597183;
border-radius: 8px;
margin-top: 5px;
width: 500px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
background-color: light yellow;
}
label:focus-within {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<form>
<label>
Full Name
<input type="text">
</label>
</form>
</body>
</html>
This is an illustration of how to use the :active pseudo-class to alter a button's border, foreground, and background colors.
<html>
<head>
<style>
div {
padding: 1rem;
}
button {
background-color: green-yellow;
font-size: large;
}
button: active {
background-color: gold;
color: red;
border: 5px inset grey;
}
</style>
</head>
<body>
<h3>:active example - button</h3>
</div>
<button>Click on me!!!</button>
</div>
</body>
</html>
Functional Pseudo-classes
A selection list or a forgiving selector list can be passed as a parameter to the listed pseudo-classes, which operate like a function. They consist of :where(), :has(), :is(), and :not().
Here is an illustration of: is pseudo-class is applied to elements such as h1, h2, h3, and a through the is() function pseudo-class. The relevant styles are, therefore, used wherever these items are present:
<html>
<head>
<style>
body {
font: 300 90%/1.4 system-ui;
margin: 1rem;
}
main :is(h1, h2, h3) {
color: green;
}
main :is(a) {
color: red;
font-size: large;
}
</style>
</head>
<body>
<main>
<h1>CSS pseudo classes</h1>
<h3> There are different css pseudo classes</h3>
<a href="">link </a>
<p>One of the types is given here.</p>
<h2>:is pseudo-class</h2>
<p> Example of :is pseudo-class </p>
</main>
</body>
</html>
In this instance, the styling is defined using the :not() pseudo-class. The h1 element does not have the sample class applied.
<html>
<head>
<style>
.sample {
text-shadow: 2px 2px 3px yellow;
}
/* <h1> elements that are not in the class '.sample' */
h1:not(.sample) {
background-color: lightblue ;
}
/* Elements that are not <h1> elements */
body :not(h1) {
text-decoration-line: line-through;
}
/* Elements that are not <div> and not <span> elements */
body :not(div):not(span) {
font-weight: bold;
}
</style>
</head>
<body>
<h1>heading with :not(.sample) pseudo-class applied</h1>
<h1 class="sample">heading with styling applied</p>
<p>Paragraph, hence :not(h1) and :not(div):not(span) applied.</p>
<div>div element, hence :not(h1) applied.</div>
</body>
</html>
List of all CSS Pseudo Classes
All of the CSS pseudo-classes are listed in the table below:
| Pseudo-Class | Description | Example |
| :active | Represents an element that the user has activated. | a:active{} |
| :any-link | Represents a component that serves as a hyperlink's source anchor whether or not it has been visited. | a:any-link{} |
| :autofill | Matches an element whose value is automatically filled in by the browser. | input:autofill{} |
| :checked | Matches to any toggled or checked radio, checkbox, or option element. | input:checked{} |
| :default | Selects the default form elements within a set of related items. | input:default{} |
| :defined | Represents any defined element. | :defined{} |
| :disabled | Represents an element that is disabled. | input: disabled{} |
| :empty | Matches an element without any children. | div:empty{} |
| :enabled | Represents an element that has been activated and is now enabled. | input:enabled{} |
| :first | Represents the @page at-rule, which is the first page of a printed document. | @page:first{} |
| :first-child | Represents the top member in a family of related components. | li:first-child{} |
| :first-of-type | Represents the first member in a set of sibling elements of that kind. | p:first-of-type{} |
| :fullscreen | Matches an element that is fullscreen at the moment. | #id:fullscreen{} |
| :focus | Represents a topic that has been examined. | input: focus{} |
| :focus-visible | Applies when a piece of content has focus or matches the focus pseudo-class. | input:focus-visible{} |
| :focus-within | If an element or any of its offspring are focused, it matches the element. | label:focus-within{} |
| :has() | If any of the relative selectors are present, this indicates an element. | :has() |
| : host | This choice designates the shadow host of the shadow DOM that houses the CSS that is utilized within. | :host{} |
| :host() | The function in question chooses the shadow host for the shadow DOM that houses the CSS that is utilized within it. | :host() |
| :host-context() | With the help of this function, you can style a custom element by using the properties or classes of its ancestor components. | :host-context() |
| :hover | Matches when a user interacts with an element using a mouse or other pointing device without necessarily activating it. | button:hover{} |
| :indeterminate | Represents any form element with an undetermined or indeterminate state. | input:indeterminate{} |
| :in-range | Represents an element whose value at that moment falls between the range bounds. | input:in-range{} |
| :invalid | Represents any element whose contents are invalid. | input:invalid{} |
| :is() | Takes any element that can be chosen by one of the selectors in a list of selectors that it receives as an argument. | :is(ol, ul){} |
| :lang() | Matches an element according to the language that element is defined to be in. | *:lang(en){} |
| :last-child | Represents the final element in a set of sibling elements. | li:last-child{} |
| :last-of-type | Represents the final element of a type in a set of elements that are siblings. | p:last-of-type{} |
| :left | Represents all left hand pages of a printed document when used with @page at-rule. | @page:left{} |
| :link | Represents a component that still needs to be examined. | a:link{} |
| :modal | Matches an element in a state where it does not interact with any elements outside of it until that interaction is rejected. | :modal{} |
| :not() | Represents an element in a list of selectors that it does not match. | p:not(strong){} |
| :nth-child() | Selects child components based on where they are in relation to all of their siblings within a parent element. | li:nth-child(-n+3){} |
| :nth-last-child() | Matches items beginning with the last (end) and arranged according to their position among siblings. | li:nth-last-child(odd){} |
| :nth-last-of-type() | Matches components starting from the last (end) according to their position among siblings of the same kind. | dd:nth-last-of-type(3n){} |
| :nth-of-type() | Matches items according to where they fall within siblings of the same kind. | dd:nth-of-type(even){} |
| :only-child | Represents an element that has no siblings. | li:only-child{} |
| :only-of-type | Represents an element without siblings of the same type. | a:only-of-type{} |
| :optional | Represents an element that lacks a needed attribute set. | input:optional{} |
| :out-of-range | Represents an element whose value at the moment is not inside the allowed range. | input:out-of-range{} |
| :picture-in-picture | Matches to an element that is in picture-in-picture mode right now. | :picture-in-picture{} |
| :placeholder-shown | Represents any element that has placeholder text showing on it at the moment. | input:placeholder-shown{} |
| :read-only | Represents a piece of content that the user cannot change. | textarea:read-only{} |
| :read-write | Represents an element that the user can change. | textarea:read-write{} |
| :required | Represents an element that possesses a set of needed attributes. | input:required{} |
| :right | Represents every page on the right side of a printed document when @page at-rule is used. | @page:right{} |
| :root | Matches the root element of a document tree. | :root{} |
| :scope | Represents the elements that selectors can use as a benchmark or scope. | :scope{} |
| :Target | Matches the segment of the URL to represent the target element with an id. | p:target{} |
| :valid | Represents any element whose contents have finished the validation process. | input:valid{} |
| :visited | Applicable after clicking on the link. | a:visited{} |
| :where() | Selects any matching element from a selector list that is supplied as a parameter. | :where(ol, ul){} |
Conclusion
In conclusion, CSS pseudo classes are effective instruments for web page styling that enable programmers to target particular elements according to their status or placement inside the document tree.
They may be applied to produce interactive user experiences, enhance accessibility, and add spectacular effects. To produce effective and reusable stylesheets, it is critical to know how to use them. Furthermore, it is crucial to thoroughly test your stylesheets on a variety of platforms and devices because some pseudo-classes cannot work with outdated browsers.