What is CSS Selectors?

CSS selectors are used to defining the elements you want to style with CSS. There are many different types of CSS selectors, each with its own unique syntax. These tell the browser which elements to apply CSS property values to.

The element or elements targeted by a CSS selector are referred to as the “subject of the selector.” A subject can be selected based on its element type, class, ID name, given attribute, or pseudo-state.

Types of CSS Selectors:-

In CSS we have lots of selectors such as:

• Universal selector
• Element type selector
• Id selector
• Class selector
• Attribute selector
• Combined selector
• Child selector
• Direct child element selector
• Sibling element selector etc.

1. Universal selector:-

The universal selector * selects each and every element or tag of the HTML file. So, you can apply any style for all the elements or tags by using only this universal selector. For example:

2. Element type selector:

It is the method of selecting the HTML tag directly by its name. For example:

As we can see in the above image, we applied a style color: red; on the h1 tag by directly using its name.

3. Id selector:

We can select HTML tag by its id also, for this we have to write # before the name of the id, just like .id-name. For example:

As we can see in the above image, we are selecting HTML tag by using its id and the defined styles are also getting applied to that element.

4. Class selector:

We can also select HTML tag by its class also, for this we have to write . before the name of the class, just like .class-name. For example:

As we can see in the above image, we are selecting HTML tag by using its class and the defined styles are also getting applied to that element.

5. Attribute selector:

While write HTML we are using so many attributes for different tags such as, name, value, target, src, etc. So, we can also select different tags by using their attribute name also. For this, we have to write the attribute name with its value inside square bracket []. For example:

As we can see in the above image, we are selecting HTML tag by using its attribute name along with its value and the defined styles are also getting applied to that element.

6. Combined selector:

Sometimes you need to define the same style on two or more different tags, classes or ids, then we can apply this combined selector. For this, we have to select multiple tags, classes or ids separated by comma ,. For example:

As we can see in the above image, we are selecting three HTML tag like h1, p, and a separated by two commas and the defined style are also getting applied to all of that element.

7. Child selector:

Nesting or tags inside a tag is a very common use case in HTML. In this case, we can't use the element type selector here because it will affect all other elements of the same type, So specification is the best option. For this, we can write all nested tags top to bottom.

As we can see in the above image, we are selecting HTML tag by using nested tags from top to bottom and the defined styles are also getting applied to that particular element.

8. Direct child element selector:

We use a direct child selector for selecting a specific tag, class, or id which is directly inside any particular tag from the nested element. Syntax of direct child selector is parent tag > direct child tag. For example

As we can see in the above image, we are selecting direct child a tag of section tag and the defined styles are also getting applied to that element.

9. Sibling element selector:

Sibling tags/elements are, one tag after another tag and they both are treated as siblings. Be careful about one after another, not one inside another. Syntax of sibling selector first tag + second tag. For example:

As we can see in the above image, we are selecting div tag by using sibling selector which is the sibling of p tag and the defined style is also getting applied to that element.

These are the most common selectors you will write in CSS, That's not mean they are all selectors. In CSS there are lots of selectors but every time few of them are used frequently. As a beginner, you need to know about at least these selectors. I provide some links below to explore more of them.