Skip to content
Laviyx Learn

Try

CSS course menu

CSS Attribute Selectors: [attr], [attr=value], ^=, $= and *=

Learn CSS attribute selectors with examples: selecting by the presence of an attribute, exact values, values that start with, end with or contain text, words in a list, and case-insensitive matching, with practical uses for links, inputs and data attributes.

Beginner3 min readUpdated
On this page

Attribute selectors match elements based on their attributes and attribute values. They are written in square brackets.

Presence and exact value#

CSS
/* Any element with a title attribute */
[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/* Inputs whose type is exactly "email" */
input[type="email"] {
  border: 2px solid #2f5fe0;
}
HTML
<p>Hover over <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p><input type="text" placeholder="Name"> <input type="email" placeholder="Email"></p>
Result

Matching part of a value#

SelectorMatches when the value...Example
[attr^="x"]starts with xa[href^="https"]
[attr$="x"]ends with xa[href$=".pdf"]
[attr*="x"]contains x anywherea[href*="youtube"]
[attr~="x"]contains the word x in a space-separated list[class~="card"]
[attr|="x"]is x or starts with x-[lang|="en"] matches en and en-IN
CSS
a[href^="https://"]::after { content: " ↗"; }
a[href$=".pdf"]::after { content: " (PDF)"; }
a[href^="mailto:"] { color: green; }
HTML
<p><a href="/about">About us</a> (internal link)</p>
<p><a href="https://developer.mozilla.org">MDN</a> (external link)</p>
<p><a href="/files/fees.pdf">Fee structure</a></p>
<p><a href="mailto:hello@example.com">Email us</a></p>
Result

The ::after part adds text after each link; it is a pseudo-element, covered in Pseudo-elements.

Case-insensitive matching#

Add i before the closing bracket to ignore case:

CSS
a[href$=".pdf" i] { }   /* matches .pdf, .PDF and .Pdf */

Styling data attributes#

Attribute selectors pair well with data-* attributes for state:

CSS
.order[data-status="shipped"] { color: green; }
.order[data-status="cancelled"] { color: #999; text-decoration: line-through; }
HTML
<p class="order" data-status="placed">Order 101: placed</p>
<p class="order" data-status="shipped">Order 102: shipped</p>
<p class="order" data-status="cancelled">Order 103: cancelled</p>
Result

JavaScript can change the attribute (element.dataset.status = "shipped") and the styles follow automatically.

Accessibility attributes as hooks#

Styling based on ARIA and state attributes keeps the visual state and the accessible state in sync:

CSS
button[aria-expanded="true"] { background: #eef3ff; }
a[aria-current="page"] { font-weight: bold; }

Practice#

Practice exercise

Make every link to a .zip file show " (ZIP)" after it, make external links (starting with http) italic, and give required inputs (those with the required attribute) a red left border.

Show solution
CSS
a[href$=".zip" i]::after { content: " (ZIP)"; }
a[href^="http"] { font-style: italic; }
input[required] { border-left: 4px solid red; }
HTML
<p><a href="/downloads/project.zip">Starter files</a></p>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><input placeholder="Name (required)" required> <input placeholder="Nickname"></p>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Selectors: Type, Class, ID, Universal and Grouping SelectorsLearn the basic CSS selectors with live examples: element (type) selectors, class selectors, ID selectors, the universal selector, combining classes, chaining element and class, and grouping with commas.Beginner6 min readCSSCSS Pseudo-classes: :hover, :focus, :nth-child, :not and MoreLearn CSS pseudo-classes with live examples: user action states (:hover, :focus, :focus-visible, :active), link states, form states (:checked, :disabled, :invalid, :user-invalid), structural pseudo-classes (:first-child, :nth-child, :nth-of-type) and :not().Beginner6 min readHTMLHTML id, class and data-* Attributes: Naming Elements for CSS and JavaScriptLearn the difference between the HTML id and class attributes, how to use multiple classes, naming conventions, custom data-* attributes, and how CSS and JavaScript select elements by id, class and data attributes.Intermediate4 min read