Mastering CSS Selectors: A Comprehensive Guide

Introduction

Today I'll be briefing CSS Selectors, as it the part where most people go wrong. It is one of those things which is widely used in DOM manipulation as well.

First we have to understand how to select different elements of the webpage. Their are three options to select:

HTML tag
class name - we refer it using single dot(.) just before the name
id - we refer it using hashtag(#) just before the name of the id

CSS Selectors

There are eight types of selectors as follows:

Universal Selector,
Individual Selector,
class and id selector,
chained/and selector,
combined selector,
inside an element selector,
direct child selector, and
Sibling selector

CSS Selectors Explained

So let me start with Universal Selectors(*) itself - As the name suggests it is universal anything that you will write in this block, the whole html page will get affected. eg you write
```
* { 
padding: 0px;
}
```
So each and every element of the page will have the padding as 0 by default.
Next is Individual selectors - from the name we understand it is used to select the elements individually by referring their html tag. It is used when we want all the elements of certain types to have certain properties for eg.
```
p {
color: #ffffff;
}
```
So every <p> element here will be changed to white colour.
Next is class and id selector, each and every element have an attribute for class and id. Usually we use classes when we want different elements to identify but we use id when we want to have only one thing in particular to identify. Basically you can use classes multiple times, and id only once. Since its HTML and CSS it will allow to use these inter-changeably but its not the correct way. So, Lets say theirs a class name called danger and its given to some HTML elements and a id called first-name given to a label. We will use this selector as follows:
```
.danger {
  color : red;
}
#first-name {
  color: blue;
}
```
Here all the elements with class danger will change the text colour to red and the element with id first-name will change its colour to blue.
Next we have on the list is chained/and selector, it is used to target elements which have some classes or id in common and we give it without space like
```
<p class="danger big">Lorem, ipsum dolor.</p>
```
We can select it like following
```
p.danger.big{
  font-size: 200px;
  color: red;
}
```
So the colour of this element will change to 200px and the text colour will change to red.
We use Combined Selector when we want to give same properties to and element or class or id.
```
<p class="danger big">Lorem, ipsum dolor.</p>
<p class="new">sit amet consectetur.</p>
```
If we want to change all the elements have class big and new to big 20px and margin 0 using css, we will achieve it like this
```
.big, .new{
  font-size: 20px;
  margin: 0px;
}
```

We can use inside an element selector when we want we change any element that is inside other element. Perfect example would be

<div>
  <ul>
      <li>
          <p>Lorem, ipsum dolor.</p>
      </li>
      <li>
          <p>Lorem, ipsum dolor.</p>
      </li>
      <li>
          <p>Lorem, ipsum dolor.</p>
      </li>
      <li>
          <p>Lorem, ipsum dolor.</p>
      </li>
  </ul>
</div>

And we want to select all the elements that have the hierarchy of <div> followed by <li> and <p>. We can target it like -

div ul p {
 color:darkblue ;
}

Next is direct child selector, it comes in handy when we want to select the direct child of any element, we use> to achieve it, like in the above HTML example, if we want to select all the elements that are <p> just after <li>, we can do it like follows
```
li>p {
 color:darkblue ;
}
```
Last in the list is sibling selector, it is not used widely. It is used to select the element just after the element we selected, sounds weird right. Lemme show you an example
```
<body>
  <p>Lorem, ipsum dolor.</p>
  <div>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem, ipsum dolor.</p>
  </div>
  <p>Lorem, ipsum dolor.
  </p>
</body>
```
```
div+p {
 color:darkblue ;
}
```
Its a little tricky only the <p> will have its colour changed as it is the next sibling of <div>

I will be adding pics for each of the example in near future. Thanks for making it to the last. If you like this article please subscribe to the news letter

Hardik Agarwal

Hardik Agarwal

Mastering CSS Selectors: A Comprehensive Guide

Table of contents

Introduction

CSS Selectors

CSS Selectors Explained