The Best Guide to Understand Selectors in CSS

Cascading Style Sheet, also known as CSS is a design language intended to simplify the process of making the web pages presentable. Selectors are used to selecting the elements and style them accordingly. This article will discuss the selectors and their types.

In this article, we will discuss the following topics. 

• What are Selectors?
• Types of Selectors
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector

What Are Selectors?

A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

Types of Selectors

There are various types of selectors in CSS. They are:

1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector 

CSS Element Selector

The element selectors select the HTML elements by name.

All the <p> elements will be center-aligned with red text and a font size of 25 pixels.

CSS ID Selector

The id selector selects the element based on the id attribute. 

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

It is written with the hash character (#), followed by the id of an element.

The paragraph with ‘id1’ will be styled and all the other elements remain as it is.

CSS Class Selector

The class selector selects the element based on the class attribute. 

It is written with a period character (.), followed by the class name.

As you can see the style is applied only to “class1”.

If you’d like only 1 specific element to be affected by the action, then you should use the element name with the class selector. Let’s understand this with an example.

You can see the h1 and h2 are styled differently.

CSS Universal Selector

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

All the elements are selected on the page.

CSS Group Selector

The group selector is used to select all the elements with the same style definition. 

Commas are used to separate the elements in the grouping.

All the elements with the same style can be styled at once.

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

Conclusion

Selectors in CSS enable you to maintain control over the customization process and code when creating a site from scratch. Investing time in learning and testing different CSS selectors will enable you to style the website efficiently with fewer codes and faster load-time.