CSS Selectors (part-1)
Tags: css, beginners, webdev, tutorial
Published: 2020-09-01 10:55:05

<p><span class='first-letter'>S</span>electors are used to selecting elements in an HTML document, in order to attach (style) properties to them.</p>

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.

A. **Combinators**

B. **Attribute Selector**

C. **Pseudo Selector**

D. **Pseudo Classes**

In this article, I will be talking about different selectors beyond class and id and will be covering **Combinators** and **Attribute Selector**. 

We will be using below HTML snippet for all the the Attribute Selector:

```html
<div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <span>Third Span</span>
    <p>Fourth Paragraph</p>
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
    </ul>
</div>

<p>Fifth Paragraph</p>
<p>Sixth Paragraph</p>
```

## A.  Combinators 

<img src="https://i.imgur.com/jOIwBkC.png" />

1. Descendant Selector
2. Universal Selector
3. Adjacent Sibling Selector
4. General Sibling Selector
5. Child Selector

### 1️⃣ Descendant Selector

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

```css
div p {
	background-color: #fdc7d5;
}
```
<u>Output:</u>
<img src="https://i.imgur.com/queeUhD.png" width="150" />


### 2️⃣ Universal Selector

You can select all the elements with the universal selector.

```css
div * {
  background-color: #fdc7d5;
}
```

div * selects any element inside all div elements.

<u>Output:</u>

<img src="https://i.imgur.com/O7UZUyG.png" width="150" />


### 3️⃣ Adjacent Sibling Selector

It selects an element that directly follows another element.

```css
div + p {
  background-color: #fdc7d5;
}
```

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

<u>Output:</u>

<img src="https://i.imgur.com/UhNBY1y.png" width="150" />

### 4️⃣ 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.

```css
div ~ p {
  background-color: #fdc7d5;
}
```

<u>Output:</u>

<img src="https://i.imgur.com/fMv8N0U.png" width="150" />

### 5️⃣ Child Selector

It selects direct children of an element. You can select elements that are direct children of other elements.

```css
div > p {
  background-color: #fdc7d5;
}
```

`div > p` selects all `p` that are direct children `div`.

<u>Output:</u>

<img src="https://i.imgur.com/queeUhD.png" width="150" />

## B.  Attribute Selector

<img src="https://i.imgur.com/51KAe94.png" />

It combines the attribute selector with another selector by adding it to the end.

```html
<input type="text" placeholder="Enter Input" />
<input type="text" placeholder="Disabled Input" disabled />
```

`input[disabled]` selects all input elements with the disabled attribute.

```css
input[disabled] {
	background: #82ffdc;
}
```

<u>Output:</u>
<img src="https://i.imgur.com/7PCGXPW.png" width="150" />

### Types of Attribute Selectors:

1. Attribute Value Selector
2. Attribute Starts With Selector
3. Attribute Ends With Selector
4. Attribute Wildcard Selector


**We will be using below HTML template for Attribute selectors:**

```html
<p class="line-first-para">First Paragraph</p>
<p class="second-para">Second Paragraph</p>
<p class="line-last">Third Paragraph</p>
```

### 1️⃣ Attribute Value Selector

`input[type="checkbox"]` selects all checkbox input elements.

```css
input[type="checkbox"] {
  font-size: 18px;
  margin-top: 3rem;
}
```

### 2️⃣ Attribute Starts With Selector
`[class^="line"]` selects elements with class="line" and either `class="line"` or `class="line-first-para"`.

```css
[class^="line"] {
    background: yellow;
}
```

<u>Output:</u>
<img src="https://i.imgur.com/ftGtzOa.png" width="150" />


### 3️⃣ Attribute Ends With Selector

`[class$="para"]` selects all paragraph which end with `para`.

```css
[class$="para"] {
    background: skyblue;
}
```

<u>Output:</u>
<img src="https://i.imgur.com/Gnwldcy.png" width="150" />

### 4️⃣ Attribute Wildcard Selector

`[class*="-"]` selects all elements with "-" in their class, such as class="second-para" or class="third-para".

```css
[class*="-"] {
    background: orangered;
    color: white;
}
```

<u>Output:</u>
<img src="https://i.imgur.com/nR8jr70.png" width="150" />


## Reference 🧐

- <a href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators'>Combinators MDN</a>
- <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors'>Attribute Selectors MDN</a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>