CSS - Pseudo Classes

Ethan D. - May 31, 2024

Syntax

Pseudo-classes in CSS style elements based on their state or position in the document. To use pseudo-classes, add the pseudo-class to the selector, separated by a colon (:).

Example: Styling a link with :hover

a:hover {
  color: red;
}

To apply pseudo-classes to HTML elements, add the pseudo-class to the selector that targets the element. You can use pseudo-classes with type selectors, class selectors, ID selectors, or any combination.

Example: Using pseudo-classes with different selectors - 1

/* Targeting a specific element with a pseudo-class */
button:active {
  background-color: blue;
}

Example: Using pseudo-classes with different selectors - 2

/* Combining a pseudo-class with a class selector */
.input-field:focus {
  border-color: green;
}

Example: Using pseudo-classes with different selectors - 3

/* Using multiple pseudo-classes together */
a:hover:not(.active) {
  text-decoration: underline;
}

Pseudo-classes can be combined with other selectors to create specific styling rules. You can chain multiple pseudo-classes together or combine them with other selectors like class or ID selectors.

Example: Combining pseudo-classes and selectors - 1

/* Combining pseudo-classes with a type selector */
input[type="checkbox"]:checked + label {
  color: green;
}

Example: Combining pseudo-classes and selectors - 2

/* Using multiple pseudo-classes */
a:visited:hover {
  color: purple;
}

Example: Combining pseudo-classes and selectors - 3

/* Combining pseudo-classes with a class selector */
.menu-item:first-child:hover {
  background-color: lightgray;
}

Link-related Pseudo-classes

CSS has several pseudo-classes that target links in different states, allowing you to style them based on user interaction. The most commonly used link-related pseudo-classes are:

Pseudo-class	Description
`:link`	Targets links that have not been visited. Use this pseudo-class to style the default state of a link.
`:visited`	Targets links that have been visited by the user. Use this pseudo-class to style links that have already been clicked.
`:hover`	Targets links when the user hovers over them with the mouse cursor. Use this pseudo-class to change the appearance of a link when it is being hovered over.
`:active`	Targets links when they are being clicked or activated by the user. Use this pseudo-class to style links during the moment they are clicked.

`:link` example

a:link {
  color: blue;
  text-decoration: none;
}

`:visited` example

a:visited {
  color: purple;
}

`:hover` example

a:hover {
  text-decoration: underline;
  color: red;
}

`:active` example

a:active {
  color: darkred;
  background-color: lightgray;
}

These link-related pseudo-classes are often used together to create a complete styling for links in different states. The usual order is :link, :visited, :hover, and :active (LVHA order) to make the styles clear.

Example: Using link-related pseudo-classes together

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  text-decoration: underline;
  color: red;
}

a:active {
  color: darkred;
  background-color: lightgray;
}

Some common uses for link-related pseudo-classes include:

Styling navigation menus to change appearance on hover or when a link is active
Providing visual feedback to users when they interact with links
Differentiating between visited and unvisited links to improve user experience
Creating custom button-like styles for links using hover and active states

Form-related Pseudo-classes

CSS has pseudo-classes that target form elements based on their state or user interaction. These pseudo-classes let you style form elements differently when they are focused, enabled, disabled, checked, or in a valid or invalid state. The most commonly used form-related pseudo-classes are:

Pseudo-class	Description
`:focus`	Targets an element when it has focus, such as when a user clicks on or tabs to an input field. Use this pseudo-class to style elements that are currently being interacted with.
`:enabled`	Targets form elements that are enabled and can be interacted with by the user. This is the default state for most form elements.
`:disabled`	Targets form elements that are disabled and cannot be interacted with by the user. Disabled elements typically have a grayed-out appearance.
`:checked`	Targets radio buttons and checkboxes when they are in a checked state. Use this pseudo-class to style these elements based on their checked state.
`:required`	Targets form elements that have the `required` attribute, indicating that they must be filled out before the form can be submitted.
`:optional`	Targets form elements that do not have the `required` attribute and are optional for the user to fill out.
`:valid`	Targets form elements that are in a valid state according to their input validation rules, such as a correctly formatted email address in an email input field.
`:invalid`	Targets form elements that are in an invalid state, such as an input field with a value that does not match the specified pattern or fails validation.

`:focus` example

input:focus {
  outline: 2px solid blue;
  background-color: lightblue;
}

`:enabled` and `:disabled` example

input:enabled {
  background-color: white;
}

input:disabled {
  background-color: lightgray;
  cursor: not-allowed;
}

`:checked` example

input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: green;
}

`:required` and `:optional` example

input:required {
  border: 1px solid red;
}

input:optional {
  border: 1px solid gray;
}

`:valid` and `:invalid` example

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

Some common uses for form-related pseudo-classes include:

Giving visual feedback to users when they interact with form elements
Styling form elements based on their state (enabled, disabled, checked)
Showing the difference between required and optional fields
Highlighting valid or invalid input values for better user experience
Making custom styles for focused form elements to improve accessibility

By using form-related pseudo-classes, you can make dynamic and interactive form styles that respond to user actions and give a clear and intuitive user experience.

Child and Type Pseudo-classes

CSS provides pseudo-classes that target elements based on their position within a parent element or their type. These pseudo-classes let you select and style specific children or elements of a certain type within a parent element. The most commonly used child and type pseudo-classes are:

Pseudo-class	Description
`:first-child`	Targets the first child element within a parent element, regardless of its type.
`:last-child`	Targets the last child element within a parent element, regardless of its type.
`:nth-child(n)`	Targets the nth child element within a parent element, regardless of its type. You can use a number, a formula (e.g., `2n+1` for odd elements), or keywords like `even` or `odd`.
`:nth-last-child(n)`	Targets the nth child element within a parent element, counting from the last child, regardless of its type.
`:only-child`	Targets an element that is the only child of its parent element.
`:first-of-type`	Targets the first element of a specific type within a parent element.
`:last-of-type`	Targets the last element of a specific type within a parent element.
`:nth-of-type(n)`	Targets the nth element of a specific type within a parent element.
`:nth-last-of-type(n)`	Targets the nth element of a specific type within a parent element, counting from the last element of that type.
`:only-of-type`	Targets an element that is the only one of its type within its parent element.

Example: Styling the first and last child elements

ul li:first-child {
  font-weight: bold;
}

ul li:last-child {
  color: red;
}

Example: Styling every even and third row in a table

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

table tr:nth-child(3n) {
  background-color: #e0e0e0;
}

Example: Styling the only child of a parent element

div p:only-child {
  font-style: italic;
}

Example: Styling the first and last of type elements

article h2:first-of-type {
  font-size: 24px;
}

article p:last-of-type {
  margin-bottom: 0;
}

Example: Styling the second paragraph of a specific type

section p:nth-of-type(2) {
  color: blue;
}

Some common uses for child and type pseudo-classes include:

Styling specific rows in a table, such as alternating row colors or highlighting every third row
Targeting the first or last element within a list or navigation menu for special styling
Applying different styles to the first or last paragraph within an article or section
Styling specific instances of an element type, such as making the second <h2> within an article bold
Creating a style for an element that is the only child of its parent

By using child and type pseudo-classes, you can create more precise and targeted styles based on an element's position or type within its parent element, without needing extra classes or IDs.

Other Pseudo-classes

CSS has several other pseudo-classes that target elements based on various conditions or states. These pseudo-classes can be used to create more advanced and specific styles. Some of the most useful pseudo-classes in this category are:

Pseudo-class	Description
`:not(selector)`	Targets elements that do not match the specified selector. This pseudo-class is useful for applying styles to all elements except those matching the selector.
`:target`	Targets the element whose ID matches the current URL fragment (the part of the URL after the `#` symbol). This pseudo-class is often used to highlight a section of the page that has been linked to.
`:lang(language-code)`	Targets elements based on the language they are determined to be using the `lang` attribute or other methods. This pseudo-class is useful for applying language-specific styles.
`:root`	Targets the root element of the document tree, which is typically the `<html>` element. This pseudo-class is useful for defining global styles or CSS variables.
`:empty`	Targets elements that have no children (including text nodes). This pseudo-class can be used to apply styles to empty elements or to hide them altogether.

`:not()` example

button:not(.primary) {
  background-color: gray;
  color: white;
}

`:target` example

:target {
  background-color: yellow;
  font-weight: bold;
}

`:lang()` example

:lang(zh) {
  font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

`:root` example

:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
}

`:empty` example

p:empty {
  display: none;
}

Some common use cases for these pseudo-classes include:

Styling elements based on complex conditions using :not()
Creating a visual indication of the current location within a page using :target
Adapting typography and other styles for different languages using :lang()
Defining global styles or CSS variables using :root
Handling empty elements consistently using :empty

You can create more flexible and adaptive styles that respond to various conditions and states within your document by using these pseudo-classes, making your CSS more powerful.