CSS Selectors Tutorial: Types, Examples, and How They Work

INTRODUCTION

CSS Selectors are used to select/target html elements in webpage so as to apply css rules to them. There are various ways of selecting elements based on their type, class or ID. The element which is selected by selector is called as subject of selector. The various types of selectors available in CSS are as follows.

• Type Selector (name/element Selector)
• Universal Selector
• Class Selector
• ID Selector
• Attribute Selector

Type Selector

The CSS Type Selector selects element by HTML tag name. It is generally used to style an HTML element of an particular type. The style applies to all elements of that type within webpage. It is also referred as name selector or element selector. Type selector is not case-sensitive.

Syntax:

element { 
    CSS Rules; 
}

Example:

p { 
    font-size: 1rem; 
}

In this example we have written CSS for HTML <p> Element. So all the Paragraph in the webpage will have an font-size of 1rem.

Universal Selector

The CSS Universal Selector selects all elements of webpage. It is indicated by asterik (*). The CSS Rule written here applies to all elements. As this selector makes changes to all elements it should be used with care.

Syntax:

*{ 
    CSS Rules; 
 }

Example:

*{ 
    margin: 0px; 
    padding: 0px; 
 }

Class Selector

The Class selector allows you to apply styles to one or more HTML elements that share the same class attribute. This Selector is represented by (.) character.

To use this selector you need to modify your HTML webpage by adding class attribute to a particular element. The attributes is assigned a suitable value. The selector then matches elements which have same class name value. This enables us to select any element in webpage by assigning it the class name.

Syntax:

.class_name { 
    CSS Rules; 
 }

Example:

In this example we have created a sample class named blue_text with a CSS rule. To apply this class to an HTML element we add class attribute with value set to blue_text as shown below for <p> element.

.blue_text { 
    color: blue; 
 }

<p class="blue_text"> Sample text </p> 

ID SELECTOR

The CSS ID Selector is used to select a single, unique element with a specific id attribute. This Selector is represented by (#) character.

In an webpage an ID can be used only once i.e. ID should be unique and no two elements can have same ID. Hence only one element is selected by this selector.

To use this selector you need to modify your HTML webpage by adding id attribute to one particular element and assigning a value to it. This enables us to select any single element in webpage and apply style to it. The selector then matches element which have same ID name.

Syntax:

#id_name { 
    CSS Rules; 
 }

Example:

In this example we have created a sample ID named blogheading. To apply this ID to an HTML element we add id attribute with value set to blogheading as shown below for <h1> element.

#blogheading { 
    font-size: 3em; 
    font-weight: bold; 
 }

<h1 id="blogheading"> Sample Heading </h1> 

Attribute Selector

The CSS Attribute Selector selects elements by its attribute and also by the value of an attribute. An Attribute is an characteristic of HTML Element that defines its style or funcationality. Every HTML element has its own set of attributes and some Global Attributes which are common to all elements.

The CSS Attribute Selector can select element in multiple ways. It can select element based on an attribute alone or in combination with the value of attribute. We can also select the value of an attribute in multiple ways. The various format available are given below.

1. [attr]

In this selection type, the element is selected which have an Attribute named attr. The attribute name is specified in square brackets.

Example:

[hreflang] { 
    color: blue; 
 }

In this example every element with an hreflang attribute set will be selected and applied the CSS rule.

2. [attr=sample]

In this selection type, the element is selected which have attr Attribute with value equal to sample (should be exact match). The attribute value is specified inside the quotes.

Example:

[hreflang="de"] { 
    color: blue; 
 }

In this example every element with an hreflang attribute set to de will be selected and applied the CSS rule.

3. [attr~=sample]

In this selection type, the elements is selected which have attr Attribute with value exactly equal to sample or contains the value sample in a space seperated list of values.

Example:

[class~=bold] { 
    font-weight: bold; 
 }

<p class="bold underline">sample text</p>

In this example every element with an class attribute set to bold will be selected and applied the CSS rule.

4. [attr|=sample]

In this selection type, the elements is selected which have attr Attribute with value exactly equal to sample or begins with sample and immediately followed by hyphen(-).

Example:

[lang|="de"] { 
     font-weight: bold; 
 }

<p lang="de-fr">sample text</p>

In this example every element with lang attribute set to de will be selected and applied the CSS rule.

5. [attr^=sample]

In this selection type, the elements is selected which have attr Attribute whose value begins with the string sample.

Example:

[href^="https"] { 
    color: green; 
 }

<a href="https://www.google.com">Google</a>

In this example every element with an href attribute which starts with https will be selected and applied the CSS rule.

6. [attr$=sample]

In this selection type, the elements is selected which have attr Attribute whose value ends with the string sample.

Example:

[href$="pdf"] { 
    color: green; 
 }

<a href="https://www.google.com/resources.pdf"> Google Resources Guide  </a>

In this example every element with an href attribute which ends with pdf will be selected and applied the CSS rule.

7. [attr*=sample]

In this selection type, the elements is selected which have attr Attribute whose value containes the substring sample anywhere in its attribute.

Example:

a[href*="google"] { 
    color: green; 
}

<a href="https://www.google.com">Google</a>

In this example every element with an href attribute which conatins substring google will be selected and applied the CSS rule.

Case-Sensitivity Flag

In CSS, a case-sensitivity flag is used in attribute selectors to control whether a comparison is case-sensitive or case-insensitive when matching attribute values. There are two important case-sensitivity flags: i and s as described below.

1. i — Case-Insensitive Match

The i flag makes the attribute selector case-insensitive. It allows matching regardless of upper or lower case in the attribute's value.

[attr="value" i] {
  /* style */
}

2. s — Case-Sensitive Match (Explicit)

The s flag forces the match to be case-sensitive, even in environments where it's not by default (rare cases like file systems).

[attr="value" s] {
  /* style */
}

Group Multiple Selector

It is possible to group different selectors and write common CSS rule which applies to each of them. You can use multiple selectors in CSS in several ways, depending on what you want to achieve. Here's a full guide:

1. Comma (,)

Selectors of different type is written in comma seperated list. If the comma is not written then the meaning of the CSS rule is changed and the first selector is interpreted as parent and second selector as descendent. You can learn about it in detail in our Descendent Combinator topic on CSS Combinators page.

Example:

h1, h2, h3, h4, h5, h6, p { 
    font-family: Geneva; 
 }

NOTE: If the selector list contains unsupported or invalid selector then the entire rule is invalidated and is ignored.

2. Compound Selectors

Target an element with multiple conditions (classes, IDs, elements):

Example: This targets any div with the class highlight.

div.highlight {
  background: yellow;
}

3. Combinators

You can use Combinators(space, >, +, ~) to Specify relationships between elements:

Example: This targets p tag immediately after h1

h1 + p{
  background: yellow;
}

4. Chaining Selectors

You can combine selectors without space to target elements more specifically:

Example: This targets div with both note and warning classes.

div.note.warning {
  border: 2px solid red;
}

Frequently Asked Questions (FAQ)

div:has(img) {
  border: 2px solid green;
}

document.querySelectorAll('p').forEach(el => {
  if (el.textContent.includes("Hello")) {
    el.style.color = "red";
  }
});

document.body.childNodes.forEach(node => {
  if (node.nodeType === Node.TEXT_NODE) {
    console.log("Text node found:", node.textContent);
  }
});

div:has(*) {
border: 2px solid green;
 }

#idname.classname {
  /* styles here */
}