The CSS pseudo-class is used to define a special state of an HTML element.
Syntax:
selector:pseudo-class {
property: value;
}You can use CSS pseudo-classes to display links differently. To style the links depending on their state use the following pseudo-classes:
a:link – selects the unvisited links.
a:visited – selects the visited links.
a:hover – selects links on mouseover.
a:active – selects the active links (a link the moment it is clicked)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #2a9d8f;
}
a:visited {
color: #264653;
}
a:hover {
color: #e76f51;
}
a:active {
color: #e9c46a;
}
</style>
</head>
<body>
<p><a href="https://lenadesign.org/" target="_blank">This is a link.</a></p>
</body>
</html>Output:
You can you the CSS pseudo-classes to match elements in a specific order:
p:empty – selects every <p> element that has no children.
p:first-child – selects every <p> elements that is the first element (child) of its container (parent).
p:first-of-type – selects every <p> element that is the first
element of its container (parent).
:not(p) – selects every element that is not a <p> element.
p:nth-child(2) – selects every <p> element that is the second element (child) of its container (parent).
p:nth-last-child(2) – selects every <p> element that is the second element(child) of its container (parent), counting from the last <p>
element (child).
p:nth-last-of-type(2) – selects every <p> element that is the second
<p> element of its container (parent), counting from the last <p>
element (child).
p:nth-of-type(2) – selects every <p> element that is the second
<p> element of its container (parent).
p:only-of-type – selects every <p> element that is the only
<p> element of its container (parent).
p:only-child – selects every <p> element that is the only element (child) of its container (parent).
Example:
<!doctype html>
<html>
<head>
<style>
.example-1 p:first-of-type {
color: #2a9d8f;
}
</style>
</head>
<body>
<div class="example-1">
<h4>Example:</h4>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>Output:
Example:
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
You can you the CSS pseudo-classes to match the form elements:
input:checked – selects every checked <input> element.
input:disabled – selects every disabled <input> element.
input:enabled – selects every enabled <input> element.
input:focus – selects the <input> element that has focus.
input:in-range – selects <input> elements according defined range.
input:invalid – selects every <input> element with an invalid value.
input:optional – selects every <input> element with no “required” attribute.
input:out-of-range – selects every <input> element with a value outside a defined range.
input:read-only – selects every <input> element with a “read-only” attribute defined.
input:read-write – Select every <input> element with no “read-only” attribute.
input:required – Selects every <input> element with a “required” attribute defined.
input:valid – selects every <input> element with a valid value.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
option:checked {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="jQ">jQuery</option>
</select>
</body>
</html>Output:
The CSS :lang pseudo-class allows to specify the special rules for different languages:
Example:
Select and style every <p> element with a lang attribute value equal to “es” (Spanish):
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(es) {
color: #e76f51;
font-weight: bold;
}
</style>
</head>
<body>
<p>Hello from Spain!.</p>
<p lang="es">Holla Todos!</p>
</body>
</html>Output:
Hello from Spain!.
Holla Todos!
Note: The lang attribute value is most often a two-letter language code, like lang=”es” (for Spanish), lang=”it” (for Italian), lang=”fr” (for French), or two language codes combined, like lang=”fr-ca” (for Canadian French).
The CSS :root pseudo-class matches the document’s root element (<html> element):
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
background-color: #2a9d8f;
padding: 20px;
}
body {
background-color: #e9c46a;
padding: 20px;
}
</style>
</head>
<body>
<div class="example">
<h4>This is a heading.</h4>
</div>
</body>
</html>Output:
The CSS :target pseudo-class can be used to style the currently active target element:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:target {
border: 2px solid #2a9d8f;
background-color: #e9c46a;
}
</style>
</head>
<body>
<div class="example">
<p><a href="#">Go to Content 1</a></p>
<p><a href="#">Go to Content 2</a></p>
<p id="news1"><b>Content 1...</b></p>
<p id="news2"><b>Content 2...</b></p>
</div>
</body>
</html>Output:
Enjoy coding!
Read also: