Attribute Selectors in CSS

by hamza bouchgaraCSS

PublishedAug 24, 2023

ModifiedSep 3, 2023

4 minute read

Introduction
Types of CSS Attribute Selectors
All CSS Attribute Selectors

Introduction

CSS attribute selectors are a powerful feature that lets you select and style HTML elements based on the attributes they possess. Instead of selecting elements based on their element type or class, attribute selectors let you select elements that have specific attributes or attribute values. This feature is especially useful when you want to fine-tune the styling of elements in your web pages or apply JavaScript behavior to specific elements.

Attribute selectors in CSS offer significant advantages and play a crucial role in web development for several reasons:

Precise Targeting: Attribute selectors allow developers to precisely target HTML elements based on the presence, value, or specific attributes they possess. This level of specificity is especially valuable when styling or scripting particular elements within a webpage.
Enhanced Styling: They enable the creation of more customized and flexible styles. For instance, you can style links differently depending on whether they lead to external or internal pages by targeting their href attribute.
Dynamic Web Design: Attribute selectors facilitate dynamic web design. By selecting elements based on their attributes, developers can make websites more adaptable to different content or user interactions.
Form Handling: They are useful for working with form elements. For example, attribute selectors can help style required form fields differently or validate user inputs based on their attribute values.
Accessibility: Attribute selectors can enhance the accessibility of a website. For instance, you can select and style elements with certain aria-* attributes to improve the user experience for people with disabilities.
Reduced Markup Dependency: Attribute selectors reduce the reliance on specific HTML structures or class names for styling or scripting purposes. This makes your CSS more resilient to changes in the HTML structure.
Improved SEO: They can be used to target and style certain elements for better search engine optimization (SEO). For instance, you can apply styles to meta tags or specific elements with schema.org attributes to improve the visibility of your content in search engine results.
Compatibility: Attribute selectors are well-supported in modern web browsers, making them a reliable choice for cross-browser compatibility.
JavaScript Integration: Attribute selectors can be used in JavaScript for selecting and manipulating DOM elements, enhancing their utility for scripting and interactivity.

In summary, attribute selectors in CSS provide web developers with a versatile and precise way to work with HTML elements. They allow developers to create more responsive, dynamic, and accessible web experiences by reducing reliance on specific HTML structures and class names for styling and scripting purposes. This makes them a valuable tool in modern web development.

Types of CSS Attribute Selectors

CSS attribute selectors allow you to select and style HTML elements based on their attributes. There are three main types of CSS attribute selectors:

1. Presence Selector ([attribute]):

This type of selector selects elements that have a specific attribute, regardless of its value. It checks for the presence of the attribute within the selected elements.

Example:

/* Select any element that has the href attribute */
[href] {
    color: red;
};

/* Select any <a></a> element that has the href attribute */
a[href] {
    color: red;
};

Copy

2. Exact Value Selector ([attribute="value"]):

This selector targets elements with a specific attribute value that matches exactly the specified value. It's useful for styling or scripting elements with precise attribute values.

Example:

/* Select all <input> elements with a "type" attribute set to "text" */
input[type="text"] {
    /* Styles for text input elements */
}

Copy

3. Substring Value Selector ([attribute*="value"]):

This selector targets elements with an attribute value containing the specified substring. It's handy for selecting elements with attribute values that include certain keywords or patterns.

Example:

/* Select all <img> elements with a "src" attribute containing "thumbnail" */
img[src*="thumbnail"] {
    /* Styles for images with "thumbnail" in the source attribute */
}

Copy

4. Starts with selector ([attribute^="value"]):

This selector targets elements with an attribute value starts with the specified string.

For example you can select all the <a></a> element with the href starts with https://

Example:

/* Select any <a></<a> element that has the href attribute & starts with https:// */
a[href^="https://"] {
    font-weight: bold;
}

Copy

5. Select elements ends with selector value ([attribute$="value"]):

This selector selects elements with attributes ending with a specified value.

Example:

a[href$=".pdf"] {
    color: blue;
};

Copy

6. Attribute Value List Selector ([attribute~="value"]):

This selector selects elements with attributes containing a specific word in a space-separated list of values.

Example:

p[class~="important"] {
    font-weight: bold;
}.

Copy

This will select all <p> elements with a class attribute containing the word "important."

All CSS Attribute Selectors

This table was taking from w3schools.com.

Selector	Example	Example description
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target="_blank"]	Selects all elements with target="_blank"
[attribute~=value]	[title~="flower"]	Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"
[attribute\|=value]	[lang\|="en"]	Selects all elements with a lang attribute value starting with "en"
[attribute^=value]	a[href^="https"]	Selects all <a> elements with a href attribute value starting with "https"
[attribute$=value]	a[href$=".pdf"]	Selects all <a> elements with a href attribute value ending with ".pdf"
[attribute=value*]	a[href*="w3schools"]	Selects all <a> elements with a href attribute value containing the substring "w3schools"