All about selectors in CSS
Published: 2021-09-14 17:00:53

## What are selectors?
CSS, or Cascading Style Sheets, is a design language that simplifies the process of making web pages presentable. Selectors are used to choose elements and apply styles to them.

## Types of selectors
There are different categories of selectors. Each category has various types. I'll be talking about 3 categories - Basic, Combination, Attribute


### 1.BASIC SELECTORS 
There are majorly 4 Basic Selector which are mentioned below:-
```html
 <!-- refer this html to understand basic selector -->
    <div class="container">
        <h1>CSS Selectors</h1>
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, maiores.</h2>
        <p id="mainPara">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, corporis.</p>
    </div>
```
#### -Universal selector
It applies rules to all the elements in HTML except the pseudo-element - ::before and ::after.
(*) is used as a universal selector

```css
* {
  font-family: "Poppins", sans-serif;
  /* font is applied to all elements */
}

```

#### -Element selector
It selects all the elements of that type 
```css
h1 {
  font-size: 3rem;
  text-align: center;
  /* this style applies to all h1 elements */
}
```

#### -Class selector
This rule is only applied to elements with the corresponding class attribute, dot (.) is prefixed to the class name in CSS.
```css
.container {
  background-color: rgb(255, 235, 201);
  padding: 1rem;
  margin: 1rem;
  /* this style is applied to element with class container */
}
```
#### -ID selector  
ID selectors are a more restrictive version of class selectors. They work in a similar fashion, except that each page can only have one element with the same ID, which means you can't reuse styles.(#) is prefixed to ID value in a CSS ID selector.

```css
#main {
  color: rgb(117, 52, 34);
  /* this style is applied to element with ID main */
}
```
#### Output after all the above CSS 
![Basic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fhrjbev399a2m8cghvy.jpg)

### 2.COMBINATIONS SELECTORS 
```html
<!-- html to understand combination of selector -->
<div class="list-container">
  <span>This is the span element</span>
  
  <ul>
    <li>Child 1 of ul element</li>
    <li>Child 2 of ul element</li>
  </ul>
  
  <ol>
    <li>Direct Child of ol element</li>
    <span>
      <li>Indirect Child of ol Element</li>
    </span>
  </ol>
  
  <div>This is a div </div>
  <a href="/">Link 1</a>
  <span>
    <a href="/">Link 2</a>
  </span>
  <a href="/">Link 3</a>
  
  <section>This is the section element</section>
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>

</div>
```
#### -AND selector 
Selects element that match the specified combination
```css
div.list-container {
  background-color: rgb(255, 235, 201);
  /* apply style to div with class list-container */
}
```
#### -OR selector 
Either of the element/class, separated with comma(,)
```css
 span, h2 {
  background-color: rgb(117, 52, 34);
  /* apply style to all span and h2 elements */
}
```
#### -Descendant selector
Selects all the child of the element 
syntax: parentElement (space) childElement {}
```css
ul li {
  background-color: orange;
  /* select all childs of ul */
}
```
#### -Direct Child selector
Selects only the direct child of the specified element
syntax: parentElement > childElement {}
```css
ol > li {
  background-color: yellow;
  /* select the direct child of ol */
}
```
#### -All Siblings selector
Selects all the siblings (element at same level) after the first element is encountered.
syntax: firstElement ~ ssecondElement{}
```css
div ~ a {
  color: rgb(255, 0, 0);
  /* selects only link1, link3  */
}
```
#### -Next Sibling selector
Only selects the very next/adjacent sibling to the first element 
syntax: firstElement + ssecondElement{}
```css
section + a {
  color: black;
  /* selects only link1 under section elementalign-content*/
}
```
#### Output after all the above CSS 
![Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kj3v6bwe0z9lzr364yf.jpg)

### 3.ATTRIBUTE SELECTORS 
```html
<!-- html to understand attribute selector -->
<div class="list-container">
  <span type="text">This is the span element</span>
  
  <ul>
    <li flag="true">Child 1 of ul element</li>
    <li flag="T">Child 2 of ul element</li>
  </ul>
  
  <ol>
    <li data="happy">Direct Child of ol element</li>
    <span>
      <li data="hello">Indirect Child of ol Element</li>
    </span>
  </ol>
  
  <div data="world">This is a div </div>
  <a href="/" link="direct">Link 1</a>
  <a href="/" link="indirect">Link 2</a>
  <a href="/">Link 3</a>
```
#### -Has attribute
Selects element with the specified attribute 
syntax: [attribute]{}
```css
[type]{
  background-color: red;
}
```
#### -Exact attribute
Selects element which has the exact same attribute and value.
syntax: [attribute = "value"]{}
```css
[flag="T"]{
  background-color:yellow;
}
```
#### -Begin attribute
Selects element whose attribute's value begins with specified text
syntax: [attribute^ = "value"]{}
```css
[data^="h"]{
  background-color:pink;
}
```
#### -End attribute
Selects element whose attribute's value ends with specified text
syntax: [attribute$ = "value"]{}
```css
[data$='d']{
  background-color: grey;
}
```
#### -Substring attribute
Selects element who specified text anywhere in the attribute value
syntax: [attribute* = "value"]{}
```css
[link*="dir"]{
  background-color: blue;
  color:white;
}
```
##### Output after all the above CSS
![attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/142xv7vvxhyvqlt28zp7.jpg)
## BONUS 
### Some random examples to have more clarity  
```css
.container * {
/* selects everything inside container class*/
}

.c1 .c2 + .c3 {
  /* Lets break it into  2 steps 
  1. .c1 .c2 - selects all c2 class elements in c1 class element 
  2. point 1 + .c3 - selects all c3 class elements that are next sibling  of (.c1 .c2)
  */
}
```