# CSS-->Part 01-->Selector

### In this class, we are going to study selector

**Why do we use Selector?**

**Selector** is used to selecting the element we want to style from HTML.

6 types of selectors are used

1. Universal
    
2. Individual
    
3. Class and ID
    
4. And
    
5. Combined
    
6. Direct child
    

**Universal Selector**: -

It is used to select the whole HTML page

**Syntax : -**

```xml
*{
    <---code--->
}
```

**Example: -**

%[https://codepen.io/ashugautam009/pen/PoBBjpM] 

**Individual Selector: -**

These are selectors which is used to target the individual element like: -

&lt;p&gt; ,&lt;h1&gt;....to ....&lt;h6&gt;,&lt;span&gt; and etc

%[https://codepen.io/ashugautam009/pen/oNMMwRO] 

**Class and Id Selector: -**

This is mostly used, selectors.

Class selector represents by--&gt;.

Id selector represents by---&gt;#

%[https://codepen.io/ashugautam009/pen/NWBBvxj] 

**And Selector: -**

It will select only those elements that both cond. is true like AND

Question: -In HTML we have a 2 class name of "bg-black" and "bg-black text-white" but we have select one even the both name is common than we use AND Selector.

%[https://codepen.io/ashugautam009/pen/abjjyYg] 

**Combined Selector: -**

We select more than one element on HTML like

%[https://codepen.io/ashugautam009/pen/jOppLpK] 

If we didn't use the Combined operator, we have to select p differently and span differently to change the color and background color.

**Direct child Selector: -**

The CSS **child selector** uses the &gt; character to target an element that is a direct child of an element type.

%[https://codepen.io/ashugautam009/pen/GRBBMKM]