CSS Attribute Selectors

CSS attribute selectors are used to select elements that have a specific attribute or attribute value.

For example, an attribute selector can select all <img> elements that have an alt attribute or select all <a> elements having a target attribute.

CSS has various inbuilt attribute selectors which provide an easy and effective way to select and style elements based on their attributes.

In this CSS tutorial, we will discuss all these attribute selectors in detail. So, let’s get started:


CSS [attribute] Selector

CSS [attribute] selector selects all elements that have the specified attribute.

For example, the attribute selector in the below example selects all <a> elements that have a target attribute. Try out the example below to see how it works:

Example:

a[target]{
  color: red;
}

CSS [attribute=”value”] Selector

CSS [attribute="value"] selector selects all the elements that have the specified attribute value.

For example, the attribute selector in the below example selects all <a> elements having href="#" .

Example:

a[href="#"]{
  color: red;
}

CSS [attribute~=”value”] Selector

CSS [attribute~="value"] selector selects all the elements having the specified word in their attribute value.

This selector is generally used for title and alt attributes.

The selector in the below example selects all <a> elements that contain the word ‘internal’ in their title attribute value.

Example:

a[title~='internal']{
  color: red;
}

CSS [attribute|=”value”] Selector

CSS [attribute|="value"] selector selects all the elements with their attribute value starting from the specified value.

The selector in the example below selects all <p> elements with their class attribute starting from the word ‘internal’.

Example:

p[class="internal-class"]{
  color: red;
}

Note: The attribute value should be a whole word. Otherwise, this selector will not work. See the example below:

Example:

p[class|='internal']{
  background: yellow;
}

CSS [attribute^=”value”] Selector

CSS [attribute^="value"] selector selects all the elements with their attribute value starting from the specified value. The attribute value need not be a whole word(Unlike the [attribute|="value"] selector).

The example below selects all the <p> elements with their class attribute starting with the word ‘int’.

Example:

p[class^="int"]{
  background: yellow;
}

CSS [attribute$=”value”] Selector

CSS [attribute$="value"] selector selects all the elements with their attribute value ending with the specified value. The ending value need not be a whole word.

In the example below, the selector selects all the <p> elements with their class attribute ending with the word ‘yellow’.

Example:

p[class$="yellow"]{
  background: yellow;
}

CSS [attribute*=”value”] Selector

CSS [attribute*="value"] selector selects all the elements whose attribute contain the specified value.

The selector in the example below selects all the <p> elements with their class attribute containing the word ‘nal’.

Example:

p[class*="nal"]{
  background: yellow;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment