pelicin › web › CSS

Pseudo Classes

This lists all available pseudo classes (omitting some that is still experimental with no browser support).

Special

:not(...)

Selects elements that do not match the selector inside :not(...).

<div id="not-example">
  <b>b</b>
  <i>i</i>
  <u>u</u>
  <i>i</i>
  <b>b</b>
</div>
#not-example :not(i) {
  background-color: red;
  color: white;
}
| LIVE PREVIEW
b i u i b

Structural

:root

Selects an element that is the root of the document (synonymous with the html selector).

:empty

Selects an element without children (other than whitespace characters).

:first-child

Selects an element that is the first child of its siblings.

<div id="first-child-example">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
#first-child-example span:first-child {
  background-color: red;
  color: white;
}
| LIVE PREVIEW
1 2 3

:last-child

Selects an element that is the last child of its siblings.

:only-child

Selects an element that has no siblings.

:nth-child(...)

Selects elements based on their order in a group of siblings.

If you use the An+B notation, then it selects elements for n = 0, 1, 2, ... .

  • odd — Select elements in odd positions (1, 3, 5, ...)
  • even — Select elements in even positions (2, 4, 6, ...)
  • 3 — Selects the 3rd element
  • 3n — Selects elements in position 3, 4, 9 ...
  • 3n+1 — Selects elements in position 1, 4, 7, ...
  • -n+3 — Select the first 3 elements (positions 3, 2, 1)
<div id="nth-child-example">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>
#nth-child-example span:nth-child(2n+1) {
  background-color: red;
  color: white;
}
| LIVE PREVIEW
1 2 3 4 5

:nth-last-child(...)

Like :nth-child(...), but counts from the last sibling.

:first-of-type

Selects an element that is the first child of this type among its siblings.

<div id="first-of-type-example">
  <b>1</b>
  <i>2</i>
  <b>3</b>
  <i>4</i>
</div>
/* Selects the first <i> among its siblings */
#first-of-type-example i:first-of-type {
  background-color: red;
  color: white;
}
| LIVE PREVIEW
1 2 3 4

:last-of-type

Selects an element that is the last child of this type among its siblings.

:only-of-type

Selects an element that has no other siblings of its type.

<div id="only-of-type-example">
  <b>b</b>
  <i>i</i>
  <u>u</u>
  <i>i</i>
  <b>b</b>
</div>
#only-of-type-example :only-of-type {
  background-color: red;
  color: white;
}
| LIVE PREVIEW
b i u i b

:nth-of-type(...)

Like :nth-child(...), but counts only elements of its type.

  • odd — Select elements of this type in odd positions (1, 3, 5, ...)
  • even — Select elements of this type in even positions (2, 4, 6, ...)
  • 3 — Selects the 3rd element of this type
  • 3n — Selects elements of this type in position 3, 4, 9 ...
  • 3n+1 — Selects elements of this type in position 1, 4, 7, ...
  • -n+3 — Select the first 3 elements of this type (positions 3, 2, 1)
<div id="nth-of-type-example">
  <b>b</b>
  <i>i</i>
  <u>u</u>
  <i>i</i>
  <b>b</b>
</div>
/* Selects the second <i> */
#nth-of-type-example i:nth-of-type(2) {
  background-color: red;
  color: white;
}
| LIVE PREVIEW
b i u i b

:nth-last-of-type(...)

Like :nth-of-type(...), but counts from the last sibling.

User action

:hover

Selects an element that is being hovered by the mouse pointer.

<div id="hover-example">
  <a href=#hover>Hover me</a>
</div>
#hover-example a:hover {
  color: red;
  text-decoration: underline;
}
| LIVE PREVIEW

:focus

Selects an element that has focus ("currently highlighted"), e.g. by navigating to it using the Tab key

<div id="focus-example">
  <input placeholder="Focus me (click/tab)">
</div>
#focus-example input:focus {
  background-color: gold;
}
| LIVE PREVIEW

:active

Selects an element that is being activated ("being clicked") by the user, e.g. by clicking or pressing Enter on it

<div id="active-example">
  <input placeholder="Click me">
</div>
#active-example input:active {
  background-color: red;
}
| LIVE PREVIEW

:focus-visible

Selects an element that has focus AND the browser determined that the "focus ring" should be visible. (Use this instead of :focus to not display the "focus ring" when the item has been clicked using the mouse.)

Particularly on Chrome:

  • :focus selects the item being hightlighted AND when the item is activated by a mouse click.
  • :focus-visible selects the item being hightlighted, BUT NOT when the item is activated by a mouse click.
<div id="focus-visible-example">
  <p>
    Use Chrome -- may not work on Firefox.<br/>
    Try keyboard-navigation and mouse-click on these buttons.
  </p>
  <!-- Highlighted by (1) keyboard navigation and (2) click -->
  <button class="one">:focus</button>
  <!-- Highlighted by keyboard navigation only -->
  <button class="two">:focus-visible</buton>
</div>
#focus-visible-example button.one:focus {
  outline: 4px dashed red;
}
#focus-visible-example button.two:focus-visible {
  outline: 4px dashed blue;
}
| LIVE PREVIEW

Use Chrome -- may not work on Firefox.
Try keyboard-navigation and mouse-click on these buttons.

:focus-within

Selects an element that has focus OR has a decendant that has focus.

<div id="focus-within-example">
  <div>Click the textbox below:</div>
  <input />
</div>
#focus-within-example {
  padding: 10px;
  border: 2px solid #dddddd;
}
#focus-within-example:focus-within {
  background-color: #ffdddd;
}
| LIVE PREVIEW
Click the textbox below:

Links

:any-link

Selects anything that would match :link or :visited.

:link

Selects unvisited links (<a>, <area>, or <link>).

:visited

Selects visited links (<a>, <area>, or <link>).

:target

Selects an element whose id value is the same as the URL fragment (e.g. https://www.example.com/index#THISTHING).

:target-within

Selects elements that would be selected by :target, or has a descendant that would be selected by :target.

Inputs

:disabled

Selects inputs that are disabled (has disabled attribute).

:enabled

Selects inputs that are enabled.

:read-only

Selects inputs that are read only (has readonly attribute).

:read-write

Selects inputs that are editable.

:required

Selects inputs that are required (has required attribute).

:optional

Selects inputs that are optional.

:default

Selects inputs that are default among a set of elements.

Can be used on:

  • <input type="checkbox">
  • <input type="radio">
  • <option>
  • <button> (if it's the form's default submit button).
<div id="default-example">
  <input type="radio" name="gesture" id="rock" checked>
  <label for="rock">Rock</label>
  <input type="radio" name="gesture" id="paper">
  <label for="paper">Paper</label>
  <input type="radio" name="gesture" id="scissors">
  <label for="scissors">Scissors</label>
</div>
#default-example input:default + label {
  color: red;
}
| LIVE PREVIEW

:checked

Selects inputs that are checked/selected.

Can be used on:

  • <input type="checkbox">
  • <input type="radio">
  • <option>

:indeterminate

Selects inputs that are on indeterminate state.

Can be used on:

  • <input type="checkbox"> (when its indeterminate property is set using JavaScript)
  • <input type="radio"> (when nothing in its group is selected)
  • <progress>

:valid

Selects inputs with valid contents.

:invalid

Selects inputs with invalid contents.

:in-range

Selects inputs whose value is in range of its min and max attributes.

:out-of-range

Selects inputs whose value is out of the range of its min and max attributes.

Lingustics

:dir(...)

Selects elements based on the directionality of their text contents. (Even when you don't specify the dir="..." global attribute on them.)

Specify ltr or rtl as its argument.

:lang(...)

Selects elements based on the language of their text contents.

The language can be determined by the lang="..." attribute, <meta> elements, or other information like HTTP headers.

<div id="lang-example">
  <p lang="en">I'm American</p>
  <p lang="jp">I'm Japanese</p>
</div>
#lang-example p:lang(en) {
  color: blue;
}
#lang-example p:lang(jp) {
  color: red;
}
| LIVE PREVIEW

I'm American

I'm Japanese

References