16 CSS Pseudo Selectors Worth Bookmarking
Tags: css, design, webdev
Published: 2020-07-23 08:57:04

This article suggests using more CSS and less JS to construct the web UI. To realize this target, it's preferrable to get farmiliar with as many as possible of CSS features. But it's quite difficult to know all them. Another solution instead is to follow the best pratices and reduce the code quantity.

Pseudo selectors to cover in this article:
- [1. :first-line](#1-first-line)
- [2. :first-letter](#2-first-letter)
- [3. ::selection](#3-selection)
- [4. :root](#4-root)
- [5. :empty](#5-empty)
- [6. :only-child](#6-only-child)
- [7. :first-of-type](#7-first-of-type)
- [8. :last-of-type](#8-last-of-type)
- [9. :nth-of-type()](#9-nth-of-type)
- [10. :nth-last-of-type()](#10-nth-last-of-type)
- [11. :link](#11-link)
- [12. :checked](#12-checked)
- [13. :valid](#13-valid)
- [14. :invalid](#14-invalid)
- [15. :lang()](#15-lang)
- [16. :not()](#16-not)
- [References](#references)


## 1. :first-line
It represents the first line of text as its name implies.

Browser Compatibility: https://caniuse.com/#search=%3Afirst-line

```css
pre:first-line {
  font-size: 24px;
  color: green;
}
```


## 2. :first-letter
Like `first-line`, it represents the first letter of the text.

Browser Compatibility: https://caniuse.com/#search=%3Afirst-line

```css
p:first-letter {
  font-size: 36px;
  color: green;
}
```


## 3. ::selection
The `selection` selector means those text you selected and highlighted. The color is <b class="bg-blue-300">blue</b> by default for most of the browsers.

Browser Compatibility: https://caniuse.com/#search=%3Aselection

```css
p::selection {
  background: orange;
}
```


## 4. :root
The `root` selector represents the root element of a document. In `HTML`, the root element is `<html>` element. In `RSS`, the root element is `<rss>` element.

In most of the modern browsers, it's used for storing custom style properties. Use `var()` as a getter for the stored values.

Browser Compatibility: https://caniuse.com/#search=%3Aroot

```css
:root {
  --bg-color: lightgray;
  --text-color: green;
}

p {
  background: var(--bg-color);
  color: var(--text-color);
}
```


## 5. :empty
The `empty` represents an empy element. An element without `space` `visible content` or `children nodes` is an `empty` element.

Browser Compatibility: https://caniuse.com/#search=%3Aempty

```css
p:empty {
  border: 1px solid black;
  height: 16px;
}
```

```html
<p></p>

<p> </p>

<p><div style="display:hidden;"></div></p>
```



## 6. :only-child
The `only-child` represents the child node which the parent has only one child node.

Browser Compatibility: https://caniuse.com/#search=%3Aonly-child

```css
div:only-child {
  background: lightgray;
}
```

```html
<div>
  <p>only child</p>
</div>
```


## 7. :first-of-type
The `first-of-type` represents the node that is the first sibling of its type in the list of children of its parent element.

Browser Compatibility: https://caniuse.com/#search=%3Afirst-of-type

```css
p:first-of-type {
  background: lightgray;
}
```

```html
<div>
  <div>1</div>
  <p>2</p>
  <p>3</p>
</div>
```


## 8. :last-of-type
But of `first-of-type`, `last-of-type` represents the last.

Browser Compatibility: https://caniuse.com/#search=%3Alast-of-type

```css
p:last-of-type {
  background: lightgray;
}
```

```html
<div>
  <div>1</div>
  <p>2</p>
  <p>3</p>
</div>
```


## 9. :nth-of-type()
`first-of-type` and `last-of-type` only represents the first or last element. With `nth-of-type`, you can select the node using its index. Remember CSS indexes start from **1**.

Browser Compatibility: https://caniuse.com/#search=%3Anth-of-type

```css
P:nth-of-type(2) {
  background: lightgray;
}
```

```html
<div>
  <div>1</div>
  <p>2</p>
  <p>3</p><!-- this one -->
</div>
```


## 10. :nth-last-of-type()
Different form `nth-of-type`, `nth-last-of-type` counts from last one in the children list.

Browser Compatibility: https://caniuse.com/#search=%3Alast-nth-of-type

```css
P:nth-last-of-type(2) {
  background: lightgray;
}
```

```html
<div>
  <div>1</div>
  <p>2</p><!-- this one -->
  <p>3</p>
</div>
```


## 11. :link
The `link` represents the unvisited `<a>` tag with href.

Browser Compatibility: https://caniuse.com/#search=%3Alink

```css
a:link {
  color: green;
}
```


## 12. :checked
The `checked` represents the checked item from check box / radio.

Browser Compatibility: https://caniuse.com/#search=%3Achecked

```css
input:checked {
  background: lightgray;
}
```


## 13. :valid
It's used in a form with validations. The `valid` represents the node that passed the validation.

Browser Compatibility: https://caniuse.com/#search=%3Avalid

```css
input:valid {
  border: 1px solid green;
}
```


## 14. :invalid
So to `valid`, `invalid` represents the node that didn't pass the validation.

Browser Compatibility: https://caniuse.com/#search=%3Ainvalid

```css
input:invalid {
  border: 1px solid red;
}
```


## 15. :lang()
The `lang` represents the node with specified language.

Browser Compatibility: https://caniuse.com/#search=%3Alang

```css
p:lang(ja) {
  color: green;
}

/* or */

p[lang|="ja"] {
  color: green;
}
```


## 16. :not()
The `not` takes a simple selector as an argument. It represents an element that is not represented by its argument.

Browser Compatibility: https://caniuse.com/#search=%3Anot

```css
div :not(p) {
  background: lightgray;
}
```

```html
<div>
  <div>1</div>
  <p>2</p><!-- p tag is not taking effect -->
  <div>3</div>
</div>
```


These are the 16 pseudo selectors. Hope you've already got farmiliar with these selectors. Actually, there are a lot more pseudo selectors that are non-standards. So I neglected them. If you think this article is great, please share it on other social networks.

Thank you reading!


## References
- https://www.w3schools.com/cssref/css_selectors.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

---

Originally on [pitayan.com](https://pitayan.com)
https://pitayan.com/posts/css-pseudo-selectors/