Learn about CSS Selectors

JS Array and its Methods (4).png

What is Selector?

The CSS selectors are commonly used to target an HTML element which helps us to specify the specific value to specific elements within our web page.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)

Attribute selectors (select elements based on an attribute or attribute value)

Here are some of the selectors:-

1. CSS Element Selector:-

The element selector selects HTML elements based on the element name.

SYNTAX-
```
*element{style properties}
```
EXAMPLE:- Here All the (h1) elements will be red in color and the font size becomes 30px.

h1{
color: red ;
font-size: 30px ;
}

2. CSS Id selector:-

The id of an element is unique within a page, so the id selector is used to select one unique element.

For creating a class selector we have to id attribute. for example - id = "name-of-the-id " is written inside that tag or elements which we want to style.

To select an element with a specific id, write a hash # character, followed by the id of the element.

SYNTAX-
```
#id_value { style properties }
```
EXAMPLE-

name-of-the-id{
   font-size: 60px ;
   color : #808080;
   background-color: #000000  ;
}

3. CSS Class Selector:-

Class selectors can be used multiple times by creating once.

For creating a class selector we have to class attribute. for example - class = "name-of-the-class" is written inside that tag or elements which we want to style.

For access to that class, we will use a dot . on our CSS page.

SYNTAX-
```
.class_name { style properties }
```
EXAMPLE-

.name-of-the-class{
   font-size: 50px ;
   color : #ffffff;
   background-color: #000000  ;
}

4. CSS Universal Selector:-

Universal Selector selects all the HTML elements on the page.

This is denoted by * , and usually this is applied on the top of the CSS page.

SYNTAX-
```
      * { style properties }
```
EXAMPLE:- The CSS rule below will affect every HTML element on the page:

* {
  text-align: center;
  color: #808080;
}

5.CSS Grouping Selector:-

The grouping selector selects all the HTML elements with the same styling.

Look at the following CSS code h1, h2, and p elements have the same styling.

SYNTAX-

*element1{style properties}
*element2{style properties}

EXAMPLE-

h1 {
text-align: center;
color:  ff0000 ;
}
h2 {
text-align: center;
color:  ff0000 ;
}
p {
text-align: center;
color:  ff0000 ;
}

Thus it is better to use a single group selector instead of using multiple elements selector. In the grouping selector, all the elements are separated by a comma ,.

EXAMPLE-

h1, h2, p {
  text-align: center;
  color:  ff0000;
}

Conclusion-

Thanks a lot for reading and hope now you know about CSS Selector.For more information please checkout MDN docs.And don't forget to hit a 👍 if you find this article helpful. Happy learning! 🎉

Resources-

1.W3Schools

2.TutorialPoint

3.MDN Web Docs