Introduction

CSS is the language we use to style an HTML document. Selectors in CSS are used to target the appropriate HTML elements on our web pages that we want to style. A CSS selector is the first part of a CSS Rule. The three most common CSS selectors are the id selector, class selector, and element selector. These are collectively known as simple selectors.

Commonly used Selectors

1. Element Selector

Selecting an element based on HTML tags. With this, the disadvantage is it selects all the elements of that type and applies styling to all of them. So it is better to use this, when we have unique tags or when the requirement is all the tags of any tag, say paragraphs or li, must have same styling. Ex: selecting h1 tag, p tag etc.

 /* individual selector */
      p {
        background-color: #372ba0;
      }

2. Class Selector

It selects an element with given class name. We use " . " to target by class. We can give more than one class name to an HTML element. Generally, we use it to group two or more tags. Ex: .red, .box-class etc.

 .bg-black {
        background-color: #b91515;
      }

3. ID Selector

It selects an element with given id. We use " # " to target by ID. We give ID's to elements to identify them uniquely. Also, we can give both class and ID to the same element. Then styling applied using ID can override the styling applied using class. Ex: #first, #item1 etc.

 #pink{
        background-color: #b91515;
      }

We can have various combinations of these selectors.

Other useful Selectors

- Chained Selector

Targets more than one element for specific requirement Ex: div.ul.li

 /* and selector (chained) */
      li.bg-black.text-white {
        background-color: #d4c820;
      }

- Grouping Selector

Combination of two or more unrelated selectors (no parent-child or sibling relationship) can be done by separating them with a comma. Ex: p,li,ul,div

  span, li ,p{
        background-color: #0b6923;
      }

- Pseudo-Class Selector

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

1. Style an element when a user mouses over it
2. Style visited and unvisited links differently
3. Style an element when it gets focus

Few pseudo class selectors :

 <style>
      /* hover */
      li:hover {
        background-color: #45c6dd;
      }
      /* focus */
      input:focus {
        background-color: #27d391;
      }
      /* first child, last child */
      li:first-child {
        background-color: #c53761;
      }
      li:last-child {
        background-color: #5fc288;
      }
      p:nth-child(2n) {
        background-color: #e6e959;
      }
      /* custom attributes */
      [lco-code] {
        background-color: rgb(85, 70, 221);
      }
    </style>

- Pseudo-Element Selector

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

1. Style the first letter, or line, of an element
2. Insert content before, or after, the content of an element

All pseudo elements:

  /* before */
      .imp-label::before {
        content: "";
        display: block;
        background-color: #4f4dc0;
        border-radius: 10px;
        width: 20px;
        height: 20px;
      }

      /* after :: part of label */
      .imp-label::after {
        content: "Heyyyyy";
        display: block;
        background-color: #4f4dc0;
        border-radius: 10px;
        width: 20px;
        height: 20px;
      }

- Universal Selector

The universal selector (*) selects all HTML elements on the page.

  /* universal selector */
      * {
        background-color: #4d4d4d;
        color: #ffffff;
      }

- Combinator Selector

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector (~)

All combinators in CSS include:

 /* inside an element */
      div ul li {
        background-color: #fff;
        color: #000000;
      }
      /* direct child */
      section > p {
        background-color: #19baeb;
      }
      /* sibling  ~ or + */
      .sibling + p {
        background-color: #ee1ec1;
      }
      .sibling ~ p {
        background-color: #ee1ec1;
      }

Conclusion

This is my first article. Hope you liked it and got a brief idea about various selectors in CSS and their usage. Feel free to share your ideas and suggestions. Thank You :)