Hi Good Day and happy learning Hashnode community, Let's get started :)

While getting started with web development, one of the most difficult tasks that you have to tackle would be How to select a particular element from the entire web page. Trust me if you master this well enough, your web-dev journey would be very smooth at least in terms of the frontend part. So, this blog is centred around that only i.e how you select an element from the web page, that's where CSS selectors come into the picture.

What are CSS Selectors?

As the name suggests CSS selectors are used to select the HTML element and help you style them. CSS selectors are attributes of HTML or HTML tags followed by curly brackets like { } inside which we mention the various styles that we want to apply to the web page. Example: We will see a lot as we proceed further so don't worry just keep reading.

So the next question you might ask is, How many types of CSS selectors are there?

Well, the simple answer is there are plenty, Do we need to know all of them?

Not really. But here in this article, we are going to discuss some of the most commonly used CSS selectors.

So, What are the most commonly used CSS selectors?

• Universal Selector
• Type Selector
• Class Selector
• Id Selector

Apart from these, we need to know a few more to get our job done while styling the web page

• Group Selectors
• Pseudo Selector
• Child Selectors, which are further divided into 2 types:

  1. Descendent Selector
  2. Direct child Selector

• Sibling Selectors which are further divided into 2 types:

  1. General Sibling Selector
  2. Adjacent Sibling Selector

To better summarise everything here is a simple diagram:

Let's Start to unravel all of them one by one, Shall we?

- Universal Selectors

These selectors are used to select all the elements present in the web page whether it is a p tag h or any list tags. They are selected using the symbol (*). Ok with the basics set, let's see a code to understand it better.

HTML CODE

    <div class="footer-section">
        <div class="footer-left">
            <img class="footer-logo" src="./images/Logo.png" alt="" />
            <ul class="list">
                <li class="list-items">@lopem ipsum</li>
                <li class="list-items">Home</li>
                <li class="list-items">APIs</li>
                <li class="list-items">Blogs</li>
                <li class="list-items">Forums</li>
            </ul>
        </div>

CSS Code

* {
color: #51E1ED;
background-color: #758283;
}

So, what is * will do is select all the elements of the web page and apply the above-mentioned styles to them.

Ok, so this changes the colour and the background-color of the entire page to the colours set above, as we have targeted the entire page.

- Type Selector

These are selectors, which are used to select based on the type of elements in the HTML. For example, you have a paragraph tag or an anchor tag in your HTML document. So, what you can do is go ahead and style those elements using CSS like this- :)

HTML CODE

    <div class="footer-section">
        <div class="footer-left">
              <p>This will be a paragraph tag</p>
            <img class="footer-logo" src="./images/Logo.png" alt="" />
            <ul class="list">
                <li class="list-items">@lopem ipsum</li>
                <li class="list-items">Home</li>
                <li class="list-items">APIs</li>
                <li class="list-items">Blogs</li>
                <a href="https://demo.com/lists"> <li class="list-items">Forums</li> </a>
            </ul>
        </div>

CSS CODE 
p {
color: #758283;
background-color: #000;
}

a {
 color: #fff;
 text-decoration: none;
}

- Class Selector

As the name suggests, this type of selector is used to target any HTML tag having a class attribute, and in the CSS file to target any class attribute, please start with a (.) before the class attribute. Let's see an example:)

HTML Code

<p class="my-text"> This is my paragraph and it is awesome</p>

CSS Code

.my-text {
font-size: 12px;
color: #CAD5E2;
}

So, as you can see we had a class named my-text and we selected it using the . and then applied the style to it.

- Id Selectors

As the name suggests, this type of selector is used to target any HTML tag having an id attribute, and in the CSS file to target any id attribute, please start with a (#) before the id attribute. Let's see an example:)

HTML Code

<div id="thisdiv"> This is a div </div>

CSS Code

#thisdiv {
color: #3DBE29;
text-align: center;
}

So, as you can see we had an id named thisdiv and we selected it using the # and then applied the style to it.

- Group Selectors

Ok so, group selectors are groups of selectors written comma (,) separated because we want to apply the same styles to all of them. So, instead of writing them over and over and over again, we write them together. Now example:)

HTML CODE

    <div class="footer-section">
        <div class="footer-left">
              <p>This will be a paragraph tag</p>
            <img class="footer-logo" src="./images/Logo.png" alt="" />
            <ul class="list">
                <li class="list-items">@lopem ipsum</li>
                <li class="list-items">Home</li>
                <li class="list-items">APIs</li>
                <li class="list-items">Blogs</li>
                <a href="https://demo.com/lists"> <li class="list-items">Forums</li> </a>
            </ul>
        </div>

CSS Code
li, p, div {
color: #0D0D0D;
font-family: helvetica;
}

- Pseudo Selectors

These are selectors which are used to define some special states of an element like when you hover over a button or when you have visited a particular part of the page. Let me explain it clearly with an example:

On a web page, you must have seen multiple times that when someone hovers over a button some actions happen like the colour of the button changes or the button becomes bigger, this is achieved with the help of a : hover pseudo-class.

Example :

HTML Code 
<p> Click here to submit this demo violet button</p>
<p> Hover over the button to see the colour change to black</p>
 <button>Submit</button>

CSS Code

button:hover
{
  background-color: #000;
}

Screenshots:

Before hovering:

After hovering:

- Child Selectors

Child selectors are a great way to select elements which are children of some parent elements and it is a great way to understand the importance of the DOM (Document Object Model). So, we know that they are two types:)

1. Descendent Selectors : This selector tries to select every element which is after the parent element in terms of hierarchy in the DOM. Most importantly the descendent element doesn't have to come just after the parent element in terms of hierarchy in the DOM. Let's see an example to understand:)

HTML Code

<h2>This is to understand the example of descendent selector </h2>
<article>
  <h2>This part will be selected as the article tag is the parent element</h2>
  <div>
    <h2>This part will also be selected as the article tag is the parent element</h2>
  </div>
</article>

CSS Code

article h2 {
    color: pink;
}

Note: What happens here is all the elements in DOM which are children of the article element and have "h2" element get affected by the style that we applied. So, the catch here is the "h2"doesn't have to come just after the article element in terms of hierarchy, for the style to be applied.

2. Direct Child Selector: Sometimes what happens is, when we use the descendent selector, it selects all the elements after the parent element in terms of the DOM. In some cases, it is too much in terms of selecting a particular element. So, to get out of the tussle we can use the direct child selector, which will only select the direct next child of the parent element in terms of hierarchy(DOM). As always let's see an example:)

HTML Code

    <p>This is an example to understand the direct child selector</p>
    <article>
      <p>This will be selected as it is the direct child of the parent article</p>
      <div>
           <p>This will also not be selected as it is not the direct child</p>
      </div>
      <p>This will also be selected as it is the direct child of the parent article</p>
    </article>

 CSS Code

article > p {
    color: pink;
}

Note: What happens here is the paragraph with "This will be selected" gets selected and the colour is applied as it is the direct next child of the parent element " article" and also the last <p> also gets selected because in terms of hierarchy it just next to <article>. And of course, the Direct Child selector is represented by ">".

- Sibling Selector

Knowing how to select the child of an element is important, but knowing how to select the elements which have a common parent is also important, this is where sibling selector comes into the picture. Basically, there are two types of sibling sectors, let's see:)

General Sibling Selector: We know sibling selector, which selects elements with common parent i.e elements that are at the same level in the DOM. The general sibling selector like "h2~p" , here "h2" and "p"have a common parent and all the "p" elements that come after "h2" and have common parents gets selected. Example:)

HTML code

 <p>Example to understand the general sibling selector/p>
<section>
  <p>Not selected as this is before sibling h2</p>
  <h2>Not selected as the selection of all siblings will start after this tag</h2>
  <p>This paragraph will be selected as it is sibling of h2 and comes after h2 also</p>
  <div>
      <p>Not selected as it is not the sibling of h2</p>
  </div>
  <p>This paragraph will be selected as it is sibling of h2 and comes after h2 also/p>
</section>

 CSS code

h2 ~ p {
    color: pink;
}

Note: Here, the first "p" tag inside "section" tag will not be selected because it doesn't come after the "h2" tag, even though they are siblings. And the "p" inside "div" will not be selected because it doesn't have common parents with "h2". But the last "p" tag will obviously be selected.

Adjacent Sibling selector: The adjacent sibling selector comes into the picture when you want to select an element which comes just after the sibling.Without taking much time let's see an example to understand this better:)

HTML Code

 <p>Example of Adjacent Sibling selector</p>
<section>
  <p>Not selected as this comes before the sibling h2</p>
  <h2>Not selected as selection will start from here</h2>
  <p>This paragraph will be selected as this is the sibling of h2 and it comes just after h2 </p>
  <div>
    <p>Not selected as this not sibling of h2</p>
  </div>
  <p>Not selected as it is not an adjacent sibling of h2</p>
</section>

 CSS Code 

h2 + p {
    color: pink;

Note: The only difference you will see as compared to the general sibling selector is that the last "p" tag will not be selected as it doesn't come just after the "h2" tag.

Thanks for reading the article. I am sure you will find other types of selectors and other ways to select different elements in a web page and style them. These were some of the most commonly used selectors.

Note: If you liked my article then consider checking out my social profiles which are linked at the top right section of the page in the ribbon section. And if you like my work do follow me as I am planning to publish more blogs.

Thanks for reading and Happy Learning.