CSS Selectors

In this blog we will try to understand what is CSS selectors are. Why do we need them, and what are the use cases of CSS selectors?

A CSS selector is used to choose an HTML element for styling.

Think of a school as an example:

• First we address everyone in the school

• Next we speak only to the teachers.

• Then comes to the students

• And finally the staff members

In the same way CSS selectors help us target all the elements or specific group of elements on a webpage.

CSS Selectors Structure:

selector {
property : Value
}

CSS selectors give us complete control over the design of a webpage.

1. Quick Adjustment: Let's say we want to change the styling of a specific button that's buried deep within a large block of code. It can be a nightmare for a developer to find and edit it manually.

    <div class="button-container">
      <button id="submitBtn" class="primary-button">
        Click Me
      </button>
    </div>
   

So in this situation CSS Selectors can work like magic so by using it we can fix it super quick.

2. Skip the Repetitive Work: If we want to center-align all the text inside a table, we don't need to style each element individually. Just use a selector, and the entire table is styled at once. It's super easy.

    <table border="1" cellpadding="10" cellspacing="0" style="text-align: center;">
      <thead>
        <tr>
          <th>Student</th>
          <th>Teacher</th>
          <th>Staff</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Rohit Sharma</td>
          <td>Axar Patel</td>
          <td>Hardik Pandya</td>
        </tr>
    </tbody>
    <thead>
   

It allows us to change the code, maintain it and gives the flexibility to work on a large project.

Types of Selectors

1. Universal Selector : This selector is used to target all the elements of the webpage.

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-bpx;
    }
   

2. Element Selector: It is used to select an element based off the tag name.

    h2 {
    font: arial;
    text-align: center;
    color: black;
    }
   

3. Class Selector: This selector targets elements with a specific class attribute.

.cell {
     background: black;
        }

4. Id Selector: It is used to select an element with given Id.

#value {
    color: white;
       }

5. Group Selector: This selector allows to apply same styling over multiple elements.

    h1, p, h5 {
            font: arial;
            color: black;
            text-align: center;
            }
   

Descendant Selector: It targets elements that are nested inside other elements, regardless of how deeply nested they are.

div p {
  color: blue;
}

This selects all <p> elements inside <div> elements.

Selectors Hierarchy

Selector Weight Example

---

Inline Style 1,0,0,0 <h1 style="color: white;">

ID 0,1,0,0 #header

Class 0,0,1,0 .button

Attribute 0,0,1,0 [type=”text”]

Pseudo-class 0,0,1,0 :hover

Element 0,0,0,1 p, div

Pseudo-element 0,0,0,1 ::before

Universal 0,0,0,0 *

---

Always Remember: The more specific the selector, the higher its priority.

Congratulations! Now we have a basic understanding of CSS Selectors.