# CSS Selectors 101

CSS selectors are needed to callout the specific selectors while styling the webpage when we are not using inline style and styling with a style tag in the head or using an external page.

Element Selector: It selects the HTML elements by their name.

ID Selector: It selects the HTML elements by their id and it’s unique for an element in the whole webpage. The symbol used is `#id-name` followed by the id-name.

Class Selector: It selects the HTML elements by their class. Many HTML elements can belong to the same class. The symbol used here is `.class-name`

Group selectors: It selects the group of HTML elements together. The way to select them is by writing the HTML element names, separated by commas. `h1, h2`.

When there are so many selector how is the priority of the selector decided so that there is an order in which they dominate over other selectors? This is called specificity of style in CSS.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769953473006/f79f8ff1-d22f-4f6a-b8ce-e5d3ad2d5ab4.png align="center")

There is also a specific order of the css as well, depending on where you are targeting the HTML elements.

Let's understand the css selectors in detail:

the tree like structure of the HTML code when laid out on the web page

In the tree structure, there is a hierarchy that exists.

1.  The top element is called the parent element
    
2.  The direct descendants of that element are called the child elements
    
3.  all the other second-level and other lower-level descendants are called relatives, as we can’t keep calling sub-child and sub—sub—sub—sub -child
    
4.  The two elements at the same level are called the siblings
    

*1\. Universal Selector*

```css
      /* selects all the elements on the webpage */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
```

1.  Type Selector
    
    1.  *helps you select the specific type of element on the webpage*
        
    
    ```css
     p {
            font-size: 20px;
        }
    ```
    
2.  Class Selectors
    
    1.  How to target the specific class of elements
        
        1.  Just put a dot before its name in the css
            

```css
      .highlight {
        background-color: #73dff3;
      }
```

3.  Id Selector
    
    1.  According to the norm, you should have one unique id on one webpage
        

```css
      #header {
        background-color: #333fff;
        color: white;
      }
```

*To maintain the consistency of the colors we use hash codes for the colours so that different browsers don't render different colours for different colour names according to them.*

5.  Attribute Selector
    
    1.  to select the specific attribute of the element
        

the name of the element and the square bracket to select the name of the attribute and its type

```css
      input[type="text"] {
        border: 1px solid #73dff3;
      }
```

6.  Descendant Selector
    
    1.  to select the descendants of the elements
        

There is space between the read them from right to left

```css
      article p {
        font-style: italic;
        background-color: #333fff;
        color: #fff;
        padding: 2px;
      }
```

7.  Child Selector
    
    1.  The way to directly select the child of an element
        

the **\>** greater than symbol is used

```css
div > p{
        background-color: #b73a3a;
        }
```

This sometimes overwrites the css selection patterns into other elements, so it is better touse classes

8.  Adjacent sibling selector
    
    1.  The sibling selector, which is the nearest to the element
        

it uses the + symbol

```css
h1 + p {
        font-family: "Courier New", Courier, monospace;
      }
```

9.  General Sibling Selector
    
    1.  How to select the siblings in general
        

it uses the ~ \*\*\*\*(tilde) symbol

```css
h2 ~ p {
        background-color: blueviolet;
        color: white;
      }
```

10.  Pseudo Class Selector
     
11.  certain classes that exist based on certain events of certain elements
     

pseudo class is attached by a colon (:) to the element name

```css
      a:hover {
        background-color: orange;
        text-decoration: none;
        padding: 2px;
        margin: 6px;
        color: white;
      }
```

11.  Pseudo Element Selector
     
12.  The element selected is selected based on its specified existence
     

double colons (::) are used

```css
      p::first-letter{
        font-weight: bold;
        font-style: italic;
        font-size: x-large;
      }
```

12.  Grouping Selector
     
13.  The way to select elements in a group
     

elements are separated by commas

```css
      h1, h2, h3 {
        color: green;
      }
```

Adios!