What are CSS Selectors and 13 Types of CSS Selectors with examples – Comprehensive Guide

A CSS selector is used to select the HTML elements you want to style. In this article, we will take a look at the types of CSS selectors with examples

CSS Selectors and types of CSS Selectors
Image from pexels.com

CSS selectors can be categorized into 5 main categories.

  1. Simple Selectors
  2. Combination Selectors
  3. Pseudo Class Selectors
  4. Pseudo Elements Selectors
  5. Attribute Selectors

Here is the list of types of CSS Selectors with examples

Element Selector

This is one of the most basic selectors to use in CSS. The element selector allows you to select and style all elements with the specified element name. This way, you’ll end up writing way less code since you won’t have to use class for each element.

CSS Element Selector

Class Selector

The class selector is perhaps the most commonly used CSS selector. You can define the class selector using period (.) followed by the class name. The style you write applies to every element that matches the class. You can add multiple classes to one element.

CSS Class Selector

ID Selector

The ID selector is used to style a single element that has a unique ID. You can use the ID selector by using the # symbol followed by the element’s unique ID. IDs are unique to each element and hence cannot be used to style multiple elements.

CSS ID Selector

If you want to earn money from freelancing read this post to start selling on fiverr: How to rank your Fiverr gig

Attribute Selector

Using an attribute selector, you can select all elements by the name or value of a given attribute and apply styling to them using [square brackets]. It can be extremely useful if you want to style point-specific elements.

CSS Attribute Selector

Descendant Selector

Descendant selectors apply styling to only those elements that are descendants of a specified element. The syntax is *element <space> descendant*. For instance, you can apply a style to every h1 inside a div with the class name “myDiv”.

CSS Descendant Selector

Child Selector

Child selector allows you to select all elements that are the children of a specified element. The syntax is *parent > child*. The difference between child selectors and descendant selectors is that the latter will only select direct children.


Adjacent Selector

This selector is used when you want to select the elements that immediately follow the specified element (adjacent siblings). To use this, you’d have to use the syntax “element + sibling”.


General Sibling Selector

These are less strict than adjacent sibling selectors. It allows you to select all the elements that are siblings of a specified element even if they are not directly adjacent. Rather than using ‘+’ like in the adjacent selector, we use ‘~’.


Universal Selector

It is also called the star selector and it selects everything in the document and applies styling to them. By default, your browser defines the styling to the element and when you want to change them, you can use star selector. To use it, just put a (*).


Pseudo Class Selector

If you want to style an element based on the state of a specified element such as hover or active, you can use pseudo-classes (:). There are many classes such as hover, active, visited, target, focus, and more. The syntax is ‘element:pseudo-class’.


Pseudo Element Selector

The pseudo-element selector (::) allows you to apply styling to the specific piece or fragment of the selected element. For example, style the first character, or line, of an element. The syntax is ‘selector::pseudo-element’.


nth-of-type Selector

If you want to apply a style to an ‘nth’ number of elements, this selector comes into use. Consider a scenario where you have four lists. If you want to apply CSS only on the second item of the ul, you can use the nth-of-type(n).


nth-child Selector

The nth-child(n) selector matches every element that is the nth child, regardless of the type, of its parent. n can be a number, a keyword, or a formula that will specify the position of an element among a group of siblings.


This is the end of the list if you liked this post please share it with your friends and if you have any questions please ask in the comments section.

Read About: Best Free WordPress themes

CSSHTML Web Development Website

Leave a Reply

Your email address will not be published. Required fields are marked *