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.

    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.

    .banner{
      border: 2px solid grey;
      background-color: blue;
    }
  

    <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.

    #navbar{
      color: white
      background-color: blue;
    }
  

    <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 “ \ “.*

    * {
      padding: 4px;
    }
  

    <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.

    span, p {
      color: red;
    }
  

    <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:

p {
  color: red;
}

.text {
  color: white;
}

#main {
  color: yellow;
}

<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.