In CSS, selectors are patterns used to select the element(s) you want to style.

What are CSS Selectors?

CSS selectors are a part of the CSS rule set that selects the element we want to style. They are used in the CSS file or inside the “style” tag while declaring the CSS. CSS selectors play an essential role in applying the style to multiple elements at once. We can use the inline CSS using the “style” attribute. But what if we want to apply the same CSS to 15 elements, we have to do that 15 times. What if something needs to be changed? We have to do that edition again 15 times.

p, h1, #my_id {

       font-weight: bold;
       text-decoration: underline;

}

1. CSS Tag Selector

The easiest CSS selector to apply is to catch the “tag” from the HTML and implement the styling on it. “Tags” are the predefined HTML tags, and with CSS selectors, you can catch them all with just a single line.

<style>
    h1 {
            color: red;
            font-size: 50px;
          }

  </style>

As a web developer, you would find using the CSS simple selectors a lot of the time because the team sometimes settles on a few things such as the style of all the headings or how the paragraph looks

1. CSS ID Selector

This one is the most popular CSS selector in our CSS selectors cheat sheet which is used in styling the web page. The “id” selector determines the “id” of the element which helps in the styling. IDs are a great way to tag along with various elements and then use CSS selectors or JavaScript to select those elements and perform a few operations. For example, if you want a different color for a section or page, you can use the same id for all the elements and implement the functions.

<style>
    #my_id {
            color: red;
            font-size: 50px;
          }

</style>
 <p id = "my_id">CSS Selector</p>

1. CSS Class Selector

Similar to the CSS ID selector, the CSS class selector selects all the elements with a particular class name. If there is at least one element with the defined class name, the styling is applied. Similar to the IDs, class names are also a great way to select multiple elements by giving them the same class.

In addition, while using some framework such as Bootstrap, we get pre-defined classes for specific elements such as “large buttons”. We can just apply CSS via class selector, and all the large buttons will be changed to the defined setting. In such cases, the CSS class selector becomes faster than the CSS ID selectors.

<style>
    .my_class {
            color: red;
            font-size: 50px;
          }

    </style>
<p class = "my_class">CSS Class Selector</p>

1. Grouping the CSS Selectors

A lot of the time, multiple elements will have the same styling configurations on a web page. So, instead of copy-pasting the same configuration multiple times for different IDs or classes, we can group them and let the web page know that these elements will share some common styling.

In the following example in our CSS selectors cheat sheet, my_id and p are combined to color them red.

<head>
    <meta charset="utf-8">
    <title>Web Template</title>
    <style>
    #my_id, p {
            color: red;
          }

    </style>
  </head>
  <body>
    <center>
        <h1 id = "my_id">I am a heading</h1>
        <p>I am a paragraph</p>
    </center>
  </body>
</html>

1. CSS Universal Selector

Such ambitious thinking involves changing the font type (or any other property) of the complete website. We cannot implement the property everywhere on the web page. Anyways, we try to reduce the repetitive behaviour with CSS Selector and not increase them. Therefore, CSS developers have thought about a wonderful property called universal selector that selects everything on the web page, i.e. it is universal. This has made its place in our CSS selectors cheat sheet.

<style>
    * {
            color: red;
          }

 </style>
<h1 id = "my_id">I am a heading</h1>
<p>I am a paragraph</p>

1. CSS Child Selector

The CSS child selector is another selector in our CSS selectors cheat sheet which is a little bit similar to the CSS descendant selector but with this selector to work, the second element should be a child of the first element. The child selector is defined with the “>” symbol which symbolizes that the second element is the child of the first element. So, what is the difference between being a descendant and being a child? The following example in our CSS selectors list will help you understand both the concept:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Web Template</title>
    <style>
    div > h3 {
            color: red;
          }

    </style>
  </head>
  <body>
    <br><br>
    <center>
        <div>
          <h3>I am a child</h3>
          <h3>I am a child</h3>
          <span><h3>I am a descendant</h3></span>
          <h3>I am a child</h3>
        </div>
    </center>
  </body>
</html>

1. CSS Adjacent Sibling Selector

The next selector in our CSS selectors list is the CSS adjacent sibling selector. The CSS adjacent sibling selector selects the element, which is directly followed by the first element. All the other elements sequences are ignored, and only the directly followed element is considered. Note that the element has to be “followed” and not be “inside” the element. The CSS adjacent sibling selector is symbolized by the symbol “+”. In the following example, we check for the adjacent “h3” tag inside the “div” tag.

<style>
    div + h3 {
            color: red;
          }
</style>
<div>
          <h3>I am not adjacent</h3>
          <h3>Me neither</h3>
 </div>
 <h3>I am adjacent</h3>

1. CSS General Sibling Selector

The CSS general sibling selector selects all the siblings, i.e. whenever the element is followed instead of the first sibling which happens in the CSS adjacent sibling selector. The CSS general sibling selector is just the generalised form of the adjacent sibling selector in CSS. The following code uses the same snippet as above, tweaking its selector.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Web Template</title>
    <style>
    div ~ h3 {
            color: red;
          }

    </style>
  </head>
  <body>
    <br><br>
    <center>
        <div>
          <h3>I Am Not Adjacent</h3>
          <h3>Me Neither</h3>
        </div>
          <h3>I am adjacent</h3>
          <h3>Me Too</h3>
    </center>
  </body>
</html>

1. CSS Pseudo-Class Selectors

CSS pseudo-class selectors are popular ones in our CSS selectors cheat sheet used while styling the components with conditions. Pseudo-classes get hold of the elements on particular states rather than without any condition as done by the CSS simple selectors. For example, the pseudo-class hover selects the elements only when the mouse is moved over to the element. Pseudo-classes give us more control and enable us to style elements quickly without taking any help from JavaScript.

<style>
    a:link {
            color: red;
          }

    </style>
  <a href = "www.google.com">This is an unvisited link</a>