Attribute Selectors

Web Development / Frontend / CSS

Attribute selectors target elements based on the presence or value of their attributes.

Demo: Attribute Selectors

HTML

<a href="https://example.com">External link</a><br>
<a href="/about">Internal link</a><br>
<input type="text" placeholder="Text input"><br>
<input type="password" placeholder="Password"><br>
<input type="email" placeholder="Email">

CSS

a[href^="https"] { color: #059669; font-weight: bold; }
a[href^="/"] { color: #6366f1; }
input[type="text"] { border: 2px solid #3b82f6; padding: 4px 8px; }
input[type="password"] { border: 2px solid #ef4444; padding: 4px 8px; }
input[type="email"] { border: 2px solid #f59e0b; padding: 4px 8px; }
.code-block-wrapper { display: none; }

Live Output Window

Attribute Selector Variants

Pattern	Matches
`[attr]`	Has the attribute
`[attr="val"]`	Exact value
`[attr^="val"]`	Starts with `val`
`[attr$="val"]`	Ends with `val`
`[attr*="val"]`	Contains `val` anywhere
`[attr~="val"]`	Contains `val` in space-separated list
`[attr	=“val”]`

These are especially useful for styling links, form inputs, and language-specific content without adding extra classes.