Welcome Back!!!

I hope you liked my previous blog.

Today, we are going to talk about CSS selectors👌.

Everyone thinks that CSS is about margins, padding, border, etc😔. So, they completely forget about the main thing, which is ....

"The Selectors"🎉.

A random Day in the life of a front-end developer:-

First, they write the HTML files. They take a random element and fix its margin and padding.

They take another element and fix its padding and margin🤣. The second edit clash with the first one and then they fix the first one and may damage the third element's state😭.

At the end of the day, they like to bang their heads on the walls.

CSS does not have to be that terrible🤗. Our problem is that we are trying to run long before we can crawl. So, hold your horses until you learn the basics.

First of all, we have to learn about CSS selectors. Once you learn to select the proper element to add your style, things will be much easier and you will hate CSS less. So, let us jump right into the blog, with a bit less dramatic and precise explanation.

Let'SGetStartedGIF.gif

CSS selectors:

Selectors are used for selecting the specific element(s) to which we are going to add styles. There are different types of CSS selectors.

Universal selectors:-

Universal selector (*) is used to select aka add style to the whole document.
e.g.

      * {
          background-color: blue;
         }

Type selectors:-

They are used to select the HTML elements which are to be styled (the content enclosed within Html tags). e.g.

      h1 {
        color: #fff;
      }

Class selectors:-

They are used to select the class attribute of one or more HTML elements. They are denoted by "." following the class name. e.g.

  .class{
     padding: 2px;
   }

Id selectors:-

They are used to select the id attribute of the particular HTML elements. They are denoted by "#" following the class name. e.g.

    #id{
     margin: 2px;
    }

Attribute selectors:-

They are used to select a tag with a specific attribute with a specific value. They are denoted by []. If the HTML element is "a", the attribute is "title" and the value of the attribute is blank. Then the selector
is denoted by a[title="blank"]. e.g.:-

        h1[title="barun"] {
          color :- #fff;
         }

Note:- Class and Id selectors are also attribute selectors.

Grouping selectors:

There are many methods to group selectors.

And selectors(chained):

And selectors are like "and" operations in algebra and also in real life. Let's check out a real-life example. Suppose you go to a store and want to buy a shirt that is "checked" and has "lifestyle" branding on it. Then we select like this:- A with "check" class and within check classes there is another class called "lifestyle". So, the selector in the language of CSS would be "shirt.checked.lifestyle".

e.g.

   Html:-
    <p class="warning bg-black" id="numero_uno">

     CSS selector:-
    p.warning.bg-black#numero_uno{
    /*write your CSS here*/
         }

Combined selectors:

If we have to select more than two Html elements and add the same style to them. Then we use the comma(,) operator to perform this operation. For example, if we have to change the colors of paragraphs and a heading from its default color to red. Then we can write like this:- p, h1{ color:- #E21717; }

The element inside element selectors: If you have to select an element(s) that is specifically a child of an element. Then we use " "(space) between the parent and child element. Note:- A child element means an element enclosed within another element. It can be right within the parent element or it can be further enclosed in another element.

A metaphorical representation:

parent child{

}

e.g.:-

      Html:-
        <ul>
            <li class="danger">Hello sir</li>
            <li><p>Hello<p></li>
            <li>
              <ul>
                  <li>first nested list</li>
              </ul>
            </li>
            <li>fourth item</li>
         </ul>
      CSS:
        ul li.danger{
          background-color: #fff;
          color: #0D0D0D;
        }

Direct child selectors:

To select the direct child(the child which is enclosed only within its parent), then we use the">" operator
to select the child(ren).
e.g.:- Please refer to the previous HTML example:-

          CSS:-
            ul>li>ul>li{
              background-color: #0D0D0D;
              }

Sibling selectors:-

To select the sibling(s)( the elements within the same direct parents), we use the "+" or "~" operator. The "+" operator is used to select the adjacent element and "~" to select all sibling elements right after the selector element. e.g. Html:-

    <div>
        <p id="one">para 1</p>
        <p>para 2</p>
        <p>para 3</p>
        <p>para 4</p>    
    </div>

  CSS:-
  /* To select only the adjacent paragraph */
    #one + p{
          background-color: blue;  
          }
  /* To select only the all following paragraphs */
    #one ~ p{
          background-color: blue;
          }

So, this almost wraps up all the major selectors in CSS. I am going to use a table for more elaborative examples. You will find the code snippets below after the next blog is uploaded.

GitHub link here: %[github.com/barun10]

Please leave a thumbs up and comments if you like this blog. Till then,

CSS selectors

Table of contents