# Master Selectors in CSS

## What is Selectors in CSS ?

Selectors in CSS in nothing but a simple way to find HTML elements. It is used to define the a specific of CSS properties and styling to particular/targeted elements in order to have fine control over each of them.

## Different ways to Select Element

Depending on the use cases we have three different ways to select a element in CSS:

* ### **Element (Type) Selector**
    
    This selector is used to select a HTML element using their tag name. Ex- h1 for headings, p for paragraphs, etc.
    
    ```css
    p {
      color: red;
    }
    ```
    
    So the above syntax will style all the paragraphs in the document.
    
* ### **Class Selector**
    
    This selector is used to target the element with a certain class attribute in the element.
    
    ```css
    .banner{
      border: 2px solid grey;
      background-color: blue;
    }
    ```
    
    ```css
    <div class="banner"></div>
    ```
    
    Here a class name is given to the element and the CSS uses “*.*“ to mention that class name and defined the styles of it. So all the elements with the *class=”banner”* will have same style.
    
* ### **ID Selector**
    
    This selector is used to target the element with a certain id attribute in the element.
    
    ```css
    #navbar{
      color: white
      background-color: blue;
    }
    ```
    
    ```css
    <div id="navbar"></div>
    ```
    
    Here a id is given to the element and the CSS uses “*\#* “ to mention that use the id and defines the styles to it. So all the elements with the *id=”navbar”* will have same style. This selector gives us most control where each line in html can be styled in this way uniquely.  
    **NOTE:** *The id must be be unique in a document. Don’t use same id in a single document.*
    
* ### Universal Selector
    
    This selector is used to style anything at global level in order to set some styles globally. This is written using *“ \* “.*
    
    ```css
    * {
      padding: 4px;
    }
    ```
    
    ```css
    <div>Something</div>
    <section>Everything</section>
    ```
    
    Here both div and section will have the same padding that is of 4px.
    
* ### Group Selector
    
    Group selectors let you apply the same styles to multiple selectors.
    
    ```css
    span, p {
      color: red;
    }
    ```
    
    ```css
    <span>Something</span>
    <p>Everything</p>
    ```
    
    Here both span and p will have the same color that is of red.
    

## Priority of Selectors

While writing CSS we often use multiple selector where overbidding may take place. So in order to handle this priority is predefined for every selectors.

**Priority Order:**

* ID Selector
    
* Class Selector
    
* Element Selector
    

This priority order is called specificity which tells which selector is going to win. Example:

```css
p {
  color: red;
}

.text {
  color: white;
}

#main {
  color: yellow;
}
```

```css
<p id="main" class="text">Something</p>
```

So what do you think which color is going to win here. So according to the priority order the **id selector** should win and yes the color of the text will be **yellow.** The element selector and class selector will overridden by the id selector.  
**NOTE:** If we had inline CSS defined for the p tag then in that case there will highest priority of that style.