Attribute selectors in CSS

Matching on an attribute's presence or the shape of its value.

input[required] {
  border-color: #7c5cff;
}

a[href^="https://"] {
  text-decoration-style: dotted;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
}

li[data-locked="true"] {
  opacity: 0.5;
}

How it works

1. [attr=value] is exact, [attr^=...] matches a prefix.
2. $= matches a suffix and *= matches anywhere.
3. An i flag makes the comparison case insensitive.

Keywords and builtins used here

• content
• opacity

The run, in numbers

Lines

15

Characters to type

187

Tokens

50

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 43 seconds.

Type this snippet

Step 4 of 6 in Selectors, step 4 of 26 in Selectors & the box model.

← Previous Next →