DEV Community 👩‍💻👨‍💻

Cover image for CSS Selectors - An Introduction
Ujala Khurram
Ujala Khurram

Posted on • Updated on

CSS Selectors - An Introduction

Selectors play an important role in styling HTML elements. CSS provides many different types of selectors that can be used depending upon the requirement.

Selectors can be divided into five different categories according to w3schools.com :

  1. Basic selectors
  2. Combinator selectors
  3. Pseudo-class selectors
  4. Pseudo-elements selectors
  5. Attribute selectors

I will be explaining each category in a separate post but for now, let's get a brief overview of each kind of selector.

1. Basic Selectors

These include:

  • Universal selector (*) that selects all the HTML elements on a page
  • Id selectors (#id) that select an HTML element with a unique id
  • Class selectors (.className) that select a group of HTML elements having same class name
  • Tag selectors that select an HTML element with the specified tag name

2. Combinator Selectors

These are the selectors that make use of a combinator such as space, >, +, and ~. These selectors are used to select descendent, child or siblings of some HTML element.

3. Pseudo-Classe Selectors

These are predefined keywords in CSS that allow us to select an HTML element and define its special behavior/state. Such states cannot be defined by basic or combinator selector.

For example, for a link, special states can be hover, visited, active, focus, etc. These states are defined with pseudo-classes such as :hover, :visited, :active, :focus etc.

4. Pseudo-Element Selectors

These allow us to define HTML elements that are not part of the markup and hence the document tree. Some Pseudo-elements that you have mostly seen are ::before and ::after.

5. Attribute Selectors

These allow us to style HTML elements with certain attributes. For example, to style an input element of type text, we can use :

input[type="text"]

In the next post, I will be explaining basic selectors in detail.

Till then, you may leave your queries and suggestions in the comments below.😊

Top comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now