[CSS] Pseudo Classes and Pseudo Elements

Not all elements have a pseudo classes and pseudo elements.

Therefore, you have to carefully use it.

Pseudo Classes

:active

This represents an element that is being activated by the user.

:checked

This represents any radio, checkbox, or option element that is checked or toggled to an on state.

:first-child

This represents the first element among a group of sibling elements.

:focus

This represents an element that has received focus.

:focus-within

This represents an element that has received focus or contains an element that has received focus.

:hover

This matches when the user interacts with an element with a pointing device, but does not necessarily activate it.

It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

:invalid

This represents any input or other form element whose contents fail to validate.

:last-child

This represents the last element among a group of sibling elements.

:link

This represents an element that has not yet been visited.

:not()

This represents elements that do not match a a list of selectors.

:nth-child()

This represents matches elements based on their position in a group of siblings.

This values are available.

• odd : odd number
• even : even number
• An+B : A and B are integer number. n is all positive integers, starting from 0.

:read-only

This represents an element such as input or textarea that is not editable by the user.

:required

This represents any input, select, or textarea element that has the required attribute set on it.

:root

This matches the root element of a tree representing the document.

This can be useful for declaring global CSS variables.

/* Example */
:root {
  --default-margin: 8px;
  --main-color: tomato;
  --text-color: dimgray;
}

div {
  margin: var(--default-margin);
  color: var(--text-color, black);	/* black if --text-color is not defined */
  background-color: var(--main-color);
}

:target

This represents a unique element with an id matching the URL's fragment.

<!-- Example: HTML part -->
<h3>ToC</h3>
<ol>
 <li><a href="#p1">1st Paragraph</a></li>
 <li><a href="#p2">2nd Paragraph</a></li>
 <li><a href="#nowhere">Nowhere</a></li>
</ol>

<h3>Paragraphs</h3>
<p id="p1">This is a first paragraph.</p>
<p id="p2">This is a second paragraph.</p>

/* Example: CSS part */
p:target {
  background-color: tomato;
}

p:target::before {  
  content: "►";  
  margin-right: .25em;
}

:valid

This represents any input or other form element whose contents validate successfully.

:visited

This represents links that the user has already visited.

Examples

img:first-child {
  position: absolute;
}

input:focus {
  border-color: gold;
}

button:hover {
  color: teal;
}

div:not(.container) {
  margin: 4px;
}

li:nth-child(even) {
  background-color: tomato;
}

a:visited {
  text-decoration: none;
}

Note

Styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:active, :hover, or :visited) that has at least equal specificity.
To style links appropriately, put the :link rule before all other link-related rules, as defined by the LVHA-order.
:link — :visited — :hover — :active

Pseudo Elements

::after

This creates a pseudo-element that is the last child of the selected element.

::backdrop

This is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.

::before

This creates a pseudo-element that is the first child of the selected element.

::first-letter

This applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content.

::first-line

This applies styles to the first line of a block-level element.

::placeholder

This represents the placeholder text in an input or textarea element.

::selection

This applies styles to the part of a document that has been highlighted by the user.

Examples

video::backdrop {
  background-color: gray;
}

::selection {
  font-size: 20px;
}