HTML & CSS reference

[attr]

Selects elements by an attribute or by its value.

Syntax

[attr="value"] { … }

Parameters

Parameter	Type	Description
[attr]	presence	The attribute is present, whatever its value.
[attr="v"]	exact	The value is exactly `v`.
[attr^="v"]	starts with	The value starts with `v`.
[attr$="v"]	ends with	The value ends with `v`.
[attr*="v"]	contains	The value contains `v` anywhere.

Examples

Different styles for different input types:

<style>
  input[type="text"] { border: 2px solid royalblue; }
  input[type="number"] { border: 2px solid orange; }
</style>
 
<input type="text" placeholder="Name">
<input type="number" placeholder="Age">

Links by the start and the end of the address:

<style>
  a[href^="https"] { color: green; }
  a[href$=".pdf"]::after { content: " (PDF)"; color: gray; }
</style>
 
<p><a href="https://example.com">Secure link</a></p>
<p><a href="/files/price.pdf">Price list</a></p>

Notes

An attribute selector has the same specificity as a class. Add i before the closing bracket to ignore case: [href$=".pdf" i].

In the tutorial

Selectors — How to pick elements for styling — by tag, class, id, nesting and attribute.

Thanks for reading!