Home » CSS » CSS Selectors: Types of Selectors And How To Use Them

A CSS rule consists of two parts. The first part is called the selector, and the second is called the definition. CSS Selector is simply a pattern or multiple patterns that help to select and style a particular element inside HTML. The definition specifies a set of key-value pairs to define the style of an element.

The most widely used techniques for selecting any HTML element are using a tag, id, class, and attribute selectors. We can use any of these selectors, a combination of selectors, or nesting of selectors to pick an element to style.

How to select any element in HTML:

The following is a syntax to define a selector in CSS:

Selector { key:value; }

A basic selector has a selector type and CSS style rules between the curly brackets. There are different types of selectors in CSS with different specific values. Let’s look into the type of selectors and how to use them.

Selector Naming:

Valid selector names can start with A-Z, a-z, or ( _ ) underscore or ( – ) hyphens. A selector can’t start with a digit. Digits can be used followed by any valid prefix.

CSS Tag Selectors:

Let’s start with the least priority selectors. They are tag selectors. To style, you can select valid HTML tags with tag names followed by the properties inside curly brackets. This is a simple selector, and the syntax looks like this.

p{ ... }

CSS Attribute Selectors:

Any tag containing attributes such as title or other attributes can be selected using an attribute selector. Unlike tag selectors, attribute selectors can select a key and a value. Certain rules can be applied to attribute selectors. You don’t need to specify any tag with this selector. This will work on all elements with the specified attribute name and or value.

[attr] – Selects elements with an attribute or key specified in the tag.

[attr~=value] – Selects an element with an attribute matching exact value from multiple class lists specified as attribute values. This selector is used when we have an element with multiple classes.

[attr|=value] – Selects element with attribute matching exact value, value starting with subcode followed by – (hyphen). This selector can be used for tags with language values like en-US and en-GB.

[attr^=value] – Selects elements with prefixed value specified. This works only for the first matched value.

[attr$=value] – Selects elements with suffixed value specified. This works only for the first matched value.

[attr*=value] – Selects elements containing at least one occurrence of value within the string. In CSS frameworks, columns can be initialised so all different selectors like .col-1 .col-2 .col-3 can have a common value just with one selector.

Attribute Comparison Flag:

[attr … i]

Using i or I before the closing bracket will make value comparison case insensitive.

[attr … s] 

Adding an s or S before the closing bracket will make value comparison case sensitive. There is no example because that’s the default case with CSS selectors.

CSS Class Selectors:

Even classes can be selected with attribute selectors, but class selectors have more priority than attribute selectors. Class selectors specifically use the class=”value” attribute to select the element.

To select the element with a class (.) dot followed by a value is used. For example

.red{…} selector will select  <div class=”red” ></div> tag. But there is something more that can be done with classes.

Both methods are the same for selection [class=”pink”]  = .pink, but the one that comes last in the code will get priority.

In the example below, the attribute takes priority

If the class definition is below the attribute, it gets priority. So in case of conflict, the last rule takes priority.

But if we still want to override our style, we can add other selectors to the selectors. For example, in our above example, the class selector can still win if it has higher specificity. By adding a tag like div.pink.

See what happens.

Even the class selector is not at the bottom, but it has higher specificity because it has 2 selectors. Classes can be reused multiple times on the webpage.

CSS Pseudo Selectors:

These specify the particular state of the element and can be used to select elements in specific states like hover, active, etc.

Most useful pseudo-classes are: 

• :empty 
• :first-child 
• :last-child
• :first-of-type 
• :last-of-type
• :hover 
• :not(selector) 
• :nth-child(n)
• :only-child
• :only-of-type

W3C has more details about all the pseudo-classes and what they do.

These selectors are used for styling form elements and more interactive parts of the web page, like Anchors, Buttons, Tables, etc. It’s so easy to select repeating patterns with selectors. For example:

This demo shows usage of :first-child, :last-child and :nth-child

CSS ID Selectors:

ID has the highest specificity among all other selectors except inline CSS. Since inline CSS does not have any selectors, ID is considered the highest priority selector in CSS. IDs can be used only once on the page. But CSS will work for multiple IDs even if it’s not correct. To select any element with an id attribute, (#) hash is used followed by the attribute value. For example

#red{…} selector will select  <div id=”red” ></div> tag. All rules and priorities we discussed for class selectors do not apply to ID selectors. ID will always take over tags, classes, and attributes.

In the example below, the ID takes over the other selectors because it has the highest precedence.

How to select Multiple elements:

If you want to apply the same rule to multiple elements, use a (,) as a separator.

.selector1, .selector2, .selector3{ … }

How to select an element with multiple classes:

Just by using a combination of multiple class names without a space.

.selector1.selector2

How to select an element of a parent:

Combine the parent selector followed by the child selector separated by a space.

.parent .child

How to select the parent of a child:

Bummer! You can’t. 😛

How to Select the Immediate Child of a Parent:

Use the ( > ) greater than sign as a separator between a parent followed by a child.

.parent > .child

How to select the next Child of an element:

Use ( + ) plus as a separator between the first and second selector.

.element + .nextelement

How to select the previous Child of an element:

Not yet.

How to Select All Immediate Children of a Parent:

Use ( ~ ) tilt as a separator between the first and second selector.

.parent ~ .children

How to select everything within the parent:

Use (*) as a selector to select everything inside relevant tags.

.parent *

Now you know how CSS selectors work, there is a way to override CSS, even if it has a high specificity rule.

Let’s learn about specificity.

When we use a selector combination, with multiple selectors, there can be a conflict between the same precedence rules. Every selector has a Specificity value based on which it gets priority. Here are specificity values for each type of selector.

Type of selectors and their Specificity Value:

1,0,0,0 – Inline Style: This style applies directly to the HTML tag. So there are no rules. Just key-value pairs of properties can be used to style the element directly. Its value is considered a number in thousands.

0,1,0,0 – ID Selector: Any element with an id attribute assigned to the tag will have the highest specificity value. Its value is considered a number in hundreds. Id is used exactly once on the entire page, so it can’t be used twice in the same selector, however, it can be combined with other id selectors.

0,0,1,0 – Class Selector: any tag having a class attribute will get precedence in tens. Multiple elements of the same type will increase the count of tens. This type includes class, pseudo-classes, pseudo-elements, and attribute selectors.

0,0,0,1 – Tag Selector: Any tag without any attribute adds up a value in the last digit.

Note: Don’t get confused with these numbers. These values are not in thousands; in fact, they all have their separate column. A selector with 10 classes will have a specificity of 0,0,10,0 and not 0,1,0,0. The selectors’ type count adds up in its column and not the next digit, as you expect in math.

So, now you know about CSS selectors, combinators, and their specificity,

Let’s look at some complex selectors and evaluate their specificity.

How to use CSS selectors efficiently?

When creating a webpage, before thinking of the website as a whole, think of smaller components that the page might have. The best approach is to create your selectors as follows:

• Create global selectors for sitewide elements like grid and content elements. Selectors for most commonly used objects with low specificity can be easily overridden.
• Create component-based selectors for specific parts of the website, like header, breadcrumb, hero image, content, sidebar, footer, etc.
• Go down more steps in each of the above components, and create child selectors like navigation, logo, widgets, etc
• Keep selectors organized in different CSS files or with comment blocks for each rule block.

Final Words:

There is more than one way to select an HTML element. One should use the CSS selectors efficiently to make the code organized and more usable. With a proper selector, you can reduce the line of code and increase its global re-usability. Now you know everything about CSS Selectors.

You can check the cascading behavior of CSS by checking how CSS inheritance works and how to override CSS properties.