Ankush Thakur
In-depth guide on CSS Selector

Photo by Andrew Neel on Unsplash

In-depth guide on CSS Selector

Article on CSS Selector

Ankush Thakur's photo
Ankush Thakur
·

8 min read

Table of contents

Here, we will be going to learn about CSS Selectors, let's first understand what is CSS selectors.

CSS Selectors are used to target the HTML Elements. we can target the HTML element with help of tags, classes, and id.

Let's Begin!

1. Universal Selector

  • Universal Selector is used to select all the elements
  • It is heavily used in the industries to remove the default Padding and margins that are provided by the browser
  • Universal Selector is Denoted by *

Example-1

<style>                                                                         
      * {
        background-color: #32b0e2;
        color:#ffffff
      }
    </style>

ar1.PNG

Example-2

<style>                                                                         
       * {
        background-color: #32b0e2;
        color:#ffffff;
        padding: 0;
        margin:0;
        outline:0;
      }
    </style>

ar2.PNG

Explanation:

  • If you see the output of example-1 and example-2. You can clearly figure it out and
    Example-1 has a default padding and margin,which is not set by us. It is the default padding is given by the browser
  • If we check the example-2, here we have removed the default padding and margins
  • Universal Selector is heavily used in industries to remove the default padding and margins that are provided by the browser

2. Individual Selector

  • Individual Selector is used to select a particular element
  • We can use this selector by mentioning the tag name like p for a paragraph or h1 for heading
  • Individual Selectors are not recommended to use in the industry, as we want more
    control over the elements
  • Universal Selector is Denoted by tag Name

Example-3

<style>                                                                         
         div {
        background-color: #bc21ca;
      }

      span {
        background-color: #13ec3f;
        color: #1d1d1d;
      }

      p {
        background-color: #ec0d0d;
      }
    </style>

<body>
    <div>Hello CSS</div>
    <span>Span is just a span, nothing more</span>
    <p>We all know paragraph</p>
    <div>I am div 2</div>
</body>

ar4.PNG

Explanation:

  • If you see the example-3 we have targeted the div tag span tag and p tag
  • With the help of an individual selector we can select all the elements of that particular tag.
  • See the Example Carefully, There are 2 div tags and both are affected by the CSS and that's the reason why it is not recommended in production because it selects all the elements with that tag, Obviously we don't want this to happen. As we want to give different styles to different elements
  • Have you seen carefully, span tag has not taken the entire width just like div tags, because it is an inline element whereas all the div tags are block-level element
  • Block-level elements take up the entire space and inline element takes only that much space that is required

3. Classes and ID

  • We can Select HTML elements with help of Classes and ID
  • To Select the element with the class we use a dot operator .
  • To Select the element with the ID we use a pound symbol #
  • Classes and ID are heavily used in the industry
  • Now, There is the question what is the difference between classes and ID?
            -  Multiple HTML elements can share the one class
        -  or one class is shared by multiple elements 
        -  IDs are unique. every Html element have a unique ID

Example-4

<style>                                                                         
        .bgColor {
        background: #055a16;
      }

      #bgcolor2 {
        background: #ec0d0d;
      }

      #bgcolor3 {
        background: #ec0d0d;
      }

      #bgcolor4 {
        background: #ec0d0d;
      }
    </style>

<body>
<div class="bgColor">Hello CSS</div>
    <span class="bgColor">Span is just a span, nothing more</span>
    <p id="bgcolor2">We all know paragraph</p>
    <div id="bgcolor3">I am div 2</div>
    <ul>
      <li>item1</li>
      <li class="bgColor">item2</li>
      <li>item3</li>
      <li>item4</li>
      <li id="bgcolor4" class="bgColor">item5</li>
    </ul>
</body>

ar5.PNG

Explanation:

  • If you see the example-4 we have targeted the div, span, and p tag with classes and IDs
  • You can clearly see that bgColor class is shared by the div, span, and li tag and got the background color of dark green color
  • If you emphasize more, you will find that ID is unique. No elements share the same ID
  • Here ID is given to p tag, div tag, and to the li tag and got a background of red color
  • Now, if you see the last li element it consists of id as well as class and it returns a the background color of red how?
  • When we have both id and class , then it comes to the CSS selector precedence
  • ID has more precedence than class, so ID CSS works!!

4. Combined Selector

  • Combined Selectors are used to target different & multiple elements at one time
  • You can select multiple elements by separating them with , comas

Example-5

<style>                                                                         
    ul, li{
        background-color: #5A20CB;
        color: #ffffff
      }

      div, span{
       color:#03C6C7;
      }
    </style>

<body>
<div>Hello CSS</div>
    <span is just a span, nothing more</span>
    <p >We all know paragraph</p>
    <div>I am div 2</div>
    <ul>
      <li class="bg-black text-white">item1</li>
      <li >item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

    <div>
      <li>awesome</li> 
      <ul>
        <li>highlight me</li>
        <li>highlight me</li>
      </ul>
    </div>
</body>

ar6.PNG

Explanation:

  • If you see the example-5 we have targeted the div, span, ul, li tags with combined Selectors
  • Above Code examples says, add background Color as purple to all the `ul and li elements
  • We also set the color of div and span tag to Teal
  • How we are targetting 2 tags at the same time ?
  • This is happing with the help of , coma operator)

5. Chained Selector

  • Chained Selectors are used to target a very Specific Element
  • The Most important thing in Chained Selector is that there should be NO White
    spaces

Example-6

<style>                                                                         
   li.bg-black.text-white {
        color: #ff086f;
        background-color: #06f335;
      }

    </style>

<body>
<div>Hello CSS</div>
    <span is just a span, nothing more</span>
    <p >We all know paragraph</p>
    <div>I am div 2</div>
    <ul>
      <li class="bg-black text-white">item1</li>
      <li class="bg-black">item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

    <div>
      <li>awesome</li> 
      <ul>
        <li>highlight me</li>
        <li>highlight me</li>
      </ul>
    </div>
</body>

ar7.PNG

Explanation:

  • If you see the above example we have specifically targeted the element there should be a li tag with a class of bg-black and text-white
  • Here, in this case, both the classes are Necessary. If any of the class is not present then it will not work.
  • You can see on the output screen there is NO CSS applied in item2 as item2 does not have a class of text-white

6. Descendant Selector

  • Descendant Selectors are also used to target a Specific Element
  • The Most important thing in Descendant Selector is that there should be White
    spaces
  • One of the Major Difference Between Descendant Selectors and Chained Selectors is WHITE SPACES

Example-7

<style>                                                                         
  div ul li {
        background-color: #17c7e6;
      }
    </style>

<body>
 <div>Welcome to live class</div>
    <span>Span is just a span, nothing more</span>
    <p>We all know paragraph</p>
    <ul>
      <li class="bg-black text-white">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

    <div>
      <li>awesome</li>
      <ul>
        <li>highlight me</li>
        <li>highlight me</li>
      </ul>
    </div
</body>

ar8.PNG

Explanation:

  • If you see the above example we have specifically targeted the element there should be a div tag inside the div tag there should be a ul tag and under the ul tag, there should be a li tag
  • so it will be like that:
    <div>
  <ul>
      <li></li>
  </ul>
</div>
  • This work in parent and child relationship.
  • You can see that li tag with the text of Awesome does not get affected as it is NOT wrapped inside the ul tag
  • It will only work when there will be div then ul and then li

7. Child Selector

  • Child Selectors are also used to target a Child of that element
  • Child Selectors denotes with > greater than a symbol
  • Let's First understand what is child 
    <nav>
  <ul>
      <li></li>
  </ul>
</nav>
  • Here nav has one child ul
  • ul also have one child li

Example-8

<style>                                                                         
  div > li {
        color: #fd0f0f;
        background-color: #cad5e2;
      }
    </style>

<body>
 <div>Welcome to live class</div>
    <span>Span is just a span, nothing more</span>
    <p>We all know paragraph</p>
    <ul>
      <li class="bg-black text-white">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

    <div>
      <li>awesome</li>
      <ul>
        <li>highlight me</li>
        <li>highlight me</li>
      </ul>
    </div
</body>

ar9.PNG

Explanation:

  • If you see the above example we have specifically targeted the child of div tag and the child should be li tag
  • If you see the above code div has 2 children ul and li
  • CSS only affected the li part
  • Most Important thing in this is that list item under ul tag are not affected because They are a child of ul, not div Tag

8. Sibling Selector

  • Sibling Selectors are also used to target the Sibling element
  • Sibling Selectors denotes with ~ sign
  • We also denote Sibling Selectors denotes with a + sign
  • Let's first understand what is sibling Selectors
<div></div>
<p></p>
<blockquote></blockquote>
  • These are known as Sibling

Example-10 with + sign

<style>                                                                         
.sibling + p {
        color: teal;
        background-color: #452b53;
      }
    </style>

<body>
  <section>
      <p>Test 1</p>
      <p class="sibling">Test 2</p>
      <p>Test 3</p>
      <p>Test 4</p>
      <p>Test 5</p>
    </section>
</body>

ar10.PNG

Explanation:

  • If you see the above example we have targeted sibling class with +operator
  • sibling + p
  • So, It checks the sibling class and the next p tag will get affected due to + sign

Example-10 with ~ sign

<style>                                                                         
.sibling ~ p {
        color: teal;
        background-color: #452b53;
      }
    </style>

<body>
  <section>
      <p>Test 1</p>
      <p class="sibling">Test 2</p>
      <p>Test 3</p>
      <p>Test 4</p>
      <p>Test 5</p>
    </section>
</body>

ar11.PNG

Explanation:

  • If you see the above example we have targeted sibling class ~ p
  • Instead of + we have used ~
  • So, It checks the sibling class and CSS be affected to all p tag that will come after that

Did you find this article valuable?

Support Ankush Thakur by becoming a sponsor. Any amount is appreciated!

#iwritecode #hiteshchoudhary #LCO #markdown #git #githubCSSiwritecode#iNeuron #HiteshChaudhary #WebDev #Javascript #LCO #LearnCodeOnline #LCO #css #learncodeonline #cssselectors @hiteshchoudharylco code with hitesh choudhary