# CSS Selectors 101: Targeting Elements with Precision

1. **Why CSS selectors are needed?**
    
    we need css selectors because the target the specific html element of the web page and allow the developer for styling
    
2. **Element selector?**
    
    elment selector means targeting the specific html element . if you select an elment and applied some style on it then in the webpage there are multiple element it then style will apply to all
    
3. **Class selector?**
    
    in the html , if multiple element have same class name , then we use the class selector it make changes in the style in all the element.for example
    
    `html`
    
    `<h1 class=”hello”>content</h1>`
    
    `<p class=”hello”>content 2</p>`
    
    `css`
    
    `.hello{`
    
    `color:red;`
    
    `}`
    
4. **ID selector?**
    
    every element of the html have the unique id but classes can be multiple
    
5. **Group selectors?**
    
    In the Group selectors we can select the multiple html element, they are separated by the comma. example:
    
    `h1,h2{`
    
    `property:value`
    
    `}`
    
6. **Descendant selectors?**
    
    It is used to match all the element that are nested anywhere within specified ancestor. eg:
    
    ```xml
    <div class="container">
      <p>Paragraph 1 (direct child)</p>
      <section>
        <p>Paragraph 2 (grandchild)</p>
      </section>
    </div>
    <p>Paragraph 3 (outside the div)</p>
    ```
    
    ```css
    container p {
      color: blue;
    }
    ```
    
7. Basic selector priority (very high level)
    
    it has defined a rule if there conflict on the multiple html elment