CSS selectors allow us to choose specific elements and apply styles to them. They help in targeting particular HTML elements for custom styling.

What are CSS Selectors

There, We can make use of CSS selector. CSS selectors allow us to choose specific elements and apply styles to them. Suppose we want to add a custom style to only a specific tag(s). We can use CSS selectors to do that.

Types of CSS Selectors

There are different types of CSS selectors, which are as follows:

1. Universal Selector

Universal selector represented by * targets all the HTML elements on the page.
The syntax of Universal Selector is as follows:

* {
  property: value;
}

Example of Universal Selector

Consider the code snippet:

main.html

<html>
  <head>
    <style>
      * {
        color: skyblue;
        text-align: center;
        padding: 24px;
      }
    </style>
  </head>

  <body>
    <p>Welcome to</p>
    <h1>CoderrShyam</h1>
  </body>
</html>

Output of Universal Selector

Welcome to

CoderrShyam

Notice, Irrespective of the tag, the style will be applied to all the elements and tags.

2. Element Selector

The element selector selects the target element based on the specific type. Suppose you want to underline all the <p> tags; in this case, the element selector will be the best choice.
The syntax of Element Selector is as follows:

p {
  property: value;
}

A selector can be any HTML tag. Here, we have considered the <p> tag.

Example of Element Selector

Consider the code snippet:

<html>
  <head>
    <title>CSS</title>
    <style>
      p {
        text-decoration: underline;
      }
    </style>
  </head>

  <body>
    <h1>CoderrShyam</h1>
    <h2>we offer:</h2>
    <p>HTML Tutorials</p>
    <p>CSS Tutorials</p>
    <p>JavaScript Tutorials</p>
  </body>
</html>

Output of Element Selector

CoderrShyam

we offer:

HTML Tutorials

CSS Tutorials

JavaScript Tutorials

Notice, The style will be applied to all the <p> tags.

3. ID Selector

The ID selector selects the target element based on the specific ID. The ID selector is represented by #.
The syntax of ID Selector is as follows:

#id {
  property: value;
}

Example of ID Selector

Consider the code snippet:

<html>
  <head>
    <style>
      #title {
        text-align: center;
        color: red;
      }
    </style>
  </head>

  <body>
    <h1 id="title">CoderrShyam</h1>
    <p>I'm a Developer and the founder of Coderrshyam.vercel.app</p>
  </body>
</html>

Note: Element selector is not recommended as the same tag can be used multiple times in the document. So, overlapping rules can occur in the stylesheet.

In the style block, the selector #title, will only target the HTML element having an ID of title.
Consider the output of the above code:

Output of ID Selector

CoderrShyam

I'm a Developer and the founder of Coderrshyam.vercel.app

Notice, how the property color: red is only applied to <h1> tag.

4. Class Selector

The class selector does the same job as the id selector, a class selector helps group various types of elements. Suppose, we want to give a custom style to a specific group of elements. In this case, the class selector is the best option.

It is written with the period . character followed by the class name in the style sheet.
The syntax of Class Selector is as follows:

.class {
  property: value;
}

Example of Class Selector

Consider the code snippet:

<html>
  <head>
    <title>CSS</title>
    <style>
      .red {
        color: red;
      }
    </style>
  </head>

  <body>
    <p>This is simple p tag</p>
    <p class="red">This p tag has class red</p>
    <p>This is simple p tag</p>
    <p class="red">This p tag has class red</p>
  </body>
</html>

In the above code snippet, the color:red will only be applied to the element having class red.

Output of Class Selector

This is simple p tag

This p tag has class red

This is simple p tag

This p tag has class red

Note: The class selector helps in grouping two or more elements.

5. Attribute Selector

The group selector is used to minimise the code. Commas , are used to separate each selector in a grouping. This reduces the number of lines of code. The code also looks clean.
The syntax of Group Selector is as follows:

div,
p,
a {
  property: value;
}

Example of Group Selector

Consider the code snippet:

<html>
  <head>
    <title>CSS</title>
    <style>
      h1 {
        color: red;
      }
      p,
      a {
        color: purple;
      }
    </style>
  </head>

  <body>
    <h1>CoderrShyam</h1>
    <p>This is the p tag</p>
    <a href="#">This is the anchor (a) tag</a>
  </body>
</html>

In the above code snippet, the color: purple will be applied to both <p> and <a> tags.

Output of Group Selector

CoderrShyam

This is the p tag

This is the anchor (a) tag

Conclusion

Universal Selector (*): Target the entire page.
Element Selector: Target a specific element.
ID Selector (#): Target element with a specific ID.
Class Selector (.): Target element(s) with the same class.
Group Selector: Group elements and target them.

CSS Selectors

Welcome to

CoderrShyam

CoderrShyam

we offer:

CoderrShyam

CoderrShyam

On this page