The Best Guide to Understand CSS Selectors

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.

Stand Out From Your Peers this Appraisal Season

Start Learning With Our FREE CoursesEnroll Now
Stand Out From Your Peers this Appraisal Season

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.

element-css-selector

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

/ele-out

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

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.

id

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

out-id

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.

class-css-selector

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

/out-class

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.

class2

You can see the h1 and h2 are styled differently.

out-class2.

CSS Universal Selector

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

uni

All the elements are selected on the page.

out-uni

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.

group

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

group-out

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. 

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.