Categories
CSS Web development

CSS Pseudo-classes

CSS pseudo-classes

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:

Go to Content 1

Go to Content 2

Content 1…

Content 2…

Enjoy coding!