CSS Attribute Selectors
New Course Coming Soon:
Get Really Good at Git
Learn how to use CSS attribute selectors
In this post I’ll introduce attribute selectors.
Also see an introduction to the basic CSS Selectors. In there I introduce several of the basic CSS selectors: using type selectors, class, id, how to combine them, how to target multiple classes, how to style several selectors in the same rule, how to follow the page hierarchy with child and direct child selectors, and adjacent siblings.
Attribute presence selectors
The first selector type is the attribute presence selector.
We can check if an element has an attribute using the []
syntax. p[id]
will select all p
tags in the page that have an id
attribute, regardless of its value:
p[id] {
/* ... */
}
Exact attribute value selectors
Inside the brackets you can check the attribute value using =
, and the CSS will be applied only if the attribute matches the exact value specified:
p[id="my-id"] {
/* ... */
}
Match an attribute value portion
While =
let us check for exact value, we have other operators:
*=
checks if the attribute contains the partial^=
checks if the attribute starts with the partial$=
checks if the attribute ends with the partial|=
checks if the attribute starts with the partial and it’s followed by a dash (common in classes, for example), or just contains the partial~=
checks if the partial is contained in the attribute, but separated by spaces from the rest
All the checks we mentioned are case sensitive.
If you add an i
just before the closing bracket, the check will be case insensitive. It’s supported in many browsers but not in all, check https://caniuse.com/#feat=css-case-insensitive.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X