Attribute Selectors

Published ....
Last modified ....

Share this post on BlueskySee discussion on Bluesky

I have recently been reading a lot of interesting articles and looking at a few interesting Codepen's that deal with attribute selectors. The two links that stand out the most are this article about making a design language with attribute selectors and this Codepen about making a color mixer from attribute selectors.

After I saw these two ideas expressed I began to think about specificity. Regularly when dealing with css developers need to keep in mind the number of selectors they use to style specific parts of a website. It really only gets complicated when managing a large codebase with several developers all authoring new code and also updating old code. So if you are looking for a solution for a large company (more than 5 developers) this is probably not the way to go.

The large reason why I began to see Attribute Selectors as being awesome is because I wouldn't need to arbitrarily increase my specificity just to style things like id specific elements. This becomes immediately valuable when dealing with any links that link to a specific element on the current document.

#id {
  color: red;
}
[