What's a CSS Selector? How works CSS Selector?
Tags: css, selector, html, css3
Published: 2022-03-04 18:35:08

 

## **“Selectors are used to selecting elements in an HTML or XML document, in order to attach (style) properties to them.”**


The most used CSS selectors are by class and by id, nevertheless, there are many selectors which you can use easily and fairly to add styles into a set of elements.

Let’s take a look at all the different kinds of available selectors along with a brief description of each one of them.

## The Selectors

**div p → Descendant Selector**

It selects an element inside another element.
This selects all the p elements inside of div.

```
div p {
  bacground-color: #fff;
  display: flex;
  text-aling: center;
}
```
**#user.admin / ul.class → Descendant Combinator**

You can combine any selector with the descendent selector.

#user.admin selects all elements with id="user" that also have class="admin".

ul.list selects all ul elements that have class="list".


```
#user.admin, ul.list {
  border: none;
  text-align: left;
  width: 100%;

}
```

*** → The Universal Selector**

You can select all the elements with the universal selector.
div * selects any element inside all div elements.

ul.something * selects every element inside all ul class="something" elements.

```
div * {
  color: #F8386D;
  line-height: 26px;
}
```

**div + p → Adjacent Sibling Selector**

It selects an element that directly follows another element.

This selects the p elements that directly follow div tag. Elements that follow another one are called siblings.

span + .intro selects every element with class="intro" that directly follows a span.

```
span + .intro {
  color: rgb(182,216,218);
  background: #D37C71;
}
```

**div ~ p → General Sibling Selector**

You can select all siblings of an element that follow it. This is like the Adjacent Selector (div + p), but this one gets all of the following elements instead of one.

```
div ~ p {
  display: flex;
  align-items: center;
}
```
**div > h1 → Child Selector**

It selects direct children of an element.

You can select elements that are direct children of other elements.
div > h1 selects all h1 that are direct children div.

```
div > h1 {
  font-size: 16px;
  width: 100%;
}
```
**:first-child / :last-child → First, last Child Pseudo-selector**

You can use these selectors to select an element that is the first child / last child element inside another element.

ul li:first-child selects all first child p elements that are in a div.

ul li:last-child selects the last li elements inside of any ul.

```
ul li:first-child {
  padding: 5em;
  margin: 0 1px 0 -4px;
}
```

```
ul li:last-child {
  font-size: 16px;
  text-decoration: none;
}
```
**:only-child→ Only Child Pseudo-selector**

It selects any element that is the only element inside of another one.

ul li:only-child selects the only li element that is in a ul.

```
ul li:only-child {
  color: #1264a3;
  padding: 0 12px 0 15px;
}
```

:nth-child(A) → Nth Child Pseudo-selector

It selects the nth (Ex: 1st, 3rd, 12th, etc.) child element in another element.

div p:nth-child(8) selects every p element that is the 8th child of a div element.

```
div p:nth-child(8) {
  color: #FA6887;
  height: 26px;
  width: 100%;
}
```

**:nth-last-child(A) → Nth Last Child Selector**

It selects the children from the bottom of the parent.

ul li:nth-last-child(2) selects all second-to-last child elements.

```
ul li:nth-last-child(2) {
  display: flex;
  font-size: 16px;
  justify-content: center;
}
```

**:first-of-type → First of Type Selector**

It selects the first element of that type within another element.

span:first-of-type selects the first span in any element.

```
span:first-of-type {
  display: block;
  font-size: 18px;
  margin-top: 3rem;
}
```

**:nth-of-type(1) → Nth of Type Selector**

It selects a specific element based on its type and order in another element, either 'even' or 'odd' instances of that element.

.example:nth-of-type(odd) selects all odd instances of the class=”example”.

div:nth-of-type(2) selects the second instance of a div.

```
.example:nth-of-type(odd) {
  line-height: 1.5;
  padding: 10px 0;
  text-align: center;
}
```