CSS Pseudo Selectors: What are they?
Tags: css, webdev, html
Published: 2020-11-15 12:07:22

Cover Photo by Tirachard Kumtanom from Pexels

#Basics
Selectors are patterns used to identify select the elements in the DOM for which styles would be applied. In fact, they are the first part of any CSS rule. 

Example:
```
h1{
  background-color: magenta;
}
```

*h1 is the selector in the above example*

Out of various patterns used to select a particular DOM element from the tree, pseudo-elements and pseudo-classes *(obviously!)* are one of its kind which is drastically different than the common ones. (FYI: Type, class, and ID selectors, Attribute selectors, Attribute selectors are the other types).

#Pseudo-Classes
Pseudo-classes are identified with a single colon according to the CSS3 specification. A pseudo-class is a selector that selects elements that are in a specific state. For instance, they may be used to change the properties of the first letter or a line of an element. 

Syntax:
```
element:name{
   //properties
}
```

Example:

```
li:first-child{
  color: red;
}
```

Here the first-child selector selects the li element which is the first child among its siblings. This selector would be helpful in styling without having to add/delete classes via Javascript if more sibling elements are added.

## Types of Pseudo-Classes 
1. **Pseudo-classes which are user-action based**
The styling will be based on the action carried out by the users.
Eg: `:hover` - applies when the user hovers over the element, `:focus` - applies when the user selects the input element.

2. **Pseudo-Classes which are based on the position**
The styling will be based on the position of the element in the DOM tree relative to its sibling/parents.
Eg: `:first-child` – selects the first element within a parent. `:nth-child()` – selects elements based on a simple provided algebraic expression. A few instances are `:nth-child(2n)` wherein all even children are selected and `:nth-child(2n+1)` wherein all odd children are selected.

3. **Other Pseudo-Classes**
`:not()` – removes elements from an existing matched set that match the selector inside the parameter of :not().
`:empty` - selects the pseudo-classes which have no text or child elements.


#Pseudo-Elements
Pseudo-Elements are used to style specific parts of the element or elements. According to the CSS3 specification they are identified with double-colon (::). For example, they may be used to change the properties of the first letter or a line of an element.

Syntax:
```
element::name{
   //properties
}
```

Example:
```
p::first-line {
  color: #5e5e5e;
}

```
The commonly used pseudo-elements include:
`::first-line` to style the first line of the element.
`::first-letter` to style the first letter of the element.
`::before` to insert some content before the element.
`::after` to insert some content after the element.
`::selection` to style the content selected by the user.

## Other Examples of Psuedo-Elements
`::file-selector-button`, `::backdrop `, `::cue`, `::cue-region`, `::grammar-error`, `::part()`, `::placeholder`, etc.


# Note:
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

The double-colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.