# CSS Selectors

# What are Selectors?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. 

## Types of selectors?

### 1. Universal Selector
 This is useful when you want to set a style for all the elements of an HTML page or for all of the elements within an element of an HTML page.
An asterisk ( i.e. "*" ) is used to denote a CSS universal selector.


```
* {
    background-color: yellow;
}
``` 

### 2. Individual Selector
 This is used for selecting a div, img, section, etc tags.


```
div {
    background-color: red;
}
``` 

### 3. class and id Selector
 This is used for targeting a class or an id with the help of . or an * asterisk.


```
.container {
    background-color: green;
}
``` 

### 4. Chained Selectors 
Chained selectors are combined selectors, inside an element, Direct child, sibling selectors.

Combined selectors use elements along with all classes defined in it.


```
.container .hero-img .col {
    background-color: orange;
}
```

### 5. Combined Selectors 
Combined selector targets all classes or div separated by a comma ',' and
applies to every element


```
.container , .hero-img , .col {
    background-color: turquoise;
}
```  

### 6. Inside an element 
Selecting a child div inside a parent can be done using '>'


```
div > p {
    background-color: turquoise;
}
```  

### 7. Direct Child 
Selecting a child div inside a parent can be done using space


```
div p {
    background-color: turquoise;
}
```  

### 8. sibling  ~ or +
Targeting a sibling div can be done using '~' or '+'.


```
div + p {
    background-color: turquoise;
}
```