CSS Attribute Ends With Selector

The CSS attribute ends with selector selects elements whose specified attribute value ends with a particular sequence of characters. It uses the dollar-equals operator ($=) between the attribute name and value.

Syntax

The attribute ends with selector uses the dollar-equals operator ($=) to match an attribute value that ends with the specified text:

[attribute$="value"] {
  property: value;
}

For example, the following selector matches links whose href attribute ends with .pdf:

a[href$=".pdf"] {
  color: #0088cc;
}

How the Attribute Ends With Selector Works

The $= operator compares the end of an attribute value with the specified sequence of characters. Characters may appear before the matching text without affecting the match.

[data-file$=".pdf"] {
  background-color: #d8f1fc;
}

The selector matches each of the following elements because their data-file values end with .pdf:

<p data-file="guide.pdf">Guide</p>
<p data-file="downloads/reference.pdf">Reference</p>

Suffix Matching

The specified text only needs to appear at the end of the attribute value. It does not need to be a complete word or be preceded by a particular character.

[data-name$="design"] {
  color: #0088cc;
}

This selector matches values such as design, web-design, and graphicdesign. It does not match design-guide because design does not appear at the end of the value.

This differs from the begins with selector (^=), which matches the specified sequence only when it appears at the beginning of the attribute value.

Case Sensitivity

Whether an attribute value is matched case-sensitively can depend on the document language and the attribute being selected. The i and s flags can explicitly control ASCII case sensitivity for the value comparison.

[data-file$=".pdf" i] {
  color: #0088cc;
}
[data-file$=".pdf" s] {
  font-weight: 600;
}

The i flag makes the value comparison ASCII case-insensitive, while the s flag makes the comparison case-sensitive.

Combining with Other Selectors

The attribute ends with selector can be combined with a type selector to restrict the match to a particular HTML element.

a[href$=".pdf"] {
  color: #0088cc;
}

This selector matches <a> elements whose href attribute ends with .pdf.

It can also be combined with classes, IDs, pseudo-classes, and other selectors:

.download[data-file$=".pdf"] {
  font-weight: 600;
}
a[href$=".pdf"]:hover {
  text-decoration: underline;
}

Specificity

An attribute ends with selector contributes 0-1-0 to a selector's specificity, the same as other attribute selectors.

Selector	Specificity
`[data-file$=".pdf"]`	`0-1-0`
`a[href$=".pdf"]`	`0-1-1`
`.download[data-file$=".pdf"]`	`0-2-0`
`#content [data-file$=".pdf"]`	`1-1-0`

Attribute Ends With Selector Example

The following example uses [data-file$=".pdf"] to select elements whose data-file value ends with .pdf. The final value ends with .txt and is not selected.

[data-file$=".pdf"] {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other attribute selectors provide different ways to match attribute values:

Specifications

The attribute ends with selector is defined in the Selectors Level 4 specification.

CSS Attribute Ends With Selector