โ† flaviocopes.com

CSS Attribute Selectors

Published Apr 29 2019

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:

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.



Wanna go from noobie to expert?

I wrote an entire book on this topic ๐Ÿ‘‡

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site

Interested in solopreneurship?