Css selector by inline style attribute

css

responsive-design

best-practices

css-specificity

byAlex Kataev·Jan 24, 2025

Select elements by their inline style using CSS attribute selectors like so:

[style*="color: red"] {
  /* Your styles here - hope you are not debugging with this */
}

Bear in mind, it only works if the style is exactly color: red. If you feel brave enough to add dynamic checking with JavaScript, you can:

document.querySelectorAll('*').forEach(el => {
  if (el.style.color.includes('red')) {
    // Time to code here like there's no tomorrow
  }
});

Remember though: This method is as fragile as the proverbial glass house. It relies on string matching and doesn't have time for CSS specificity or cascading rules. Stick with class-based styling when you can for the sake of ease.

Ground rules of attribute selectors

Attribute selectors are the flexible friends of CSS, but they have a cheeky tendency to throw a spanner in the works when your styles include format variations. That innocent space and inconspicuous semicolon can mess up your matching:

/* This matches our specific inline style: */
[style="display:block;"]

/* This WILL NOT match if there's a sneaky space after the colon or an unexpected semicolon */
[style*="display: block;"]

Aiming for total accuracy in your format, spaces and all, makes you more likely to succeed here. But be warned: this route also makes things fragile as styles can do a chameleon act in multiple, equally valid formats.

Antidote to selector fragility

If you've got inline styles presenting in different permutations then you have a and CSS selectors aren't going to help you discern these; it's simply not in their job description. Be prepared to ponder over the prudence of this approach in your project.

What's more, CSS cannot select elements based on specified, computed, or used values—only exact string matches. If it's dynamic style checking you're after, turn your eyes to JavaScript, it's a more reliable beast when it comes to accessing computed styles.

Precision matching with perils

Aim for exact value matching when you're set on targeting inline styles.

[style="background: linear-gradient(red, yellow);"] {
  /* Styles for this mouth-watering gradient only */
  /* Hopefully it's not a hot dog */
}

Mind the variations, though. A vendor prefix here or a different color format there (hex, rgb, etc.) would slip through this net.

Broadening your tech horizon

Use attribute selectors for inline style targeting, yes, but don't forget about the wider CSS universe out there.

JavaScript is great at adding classes or data-attributes based on computed styles.
CSS variables help you control styles dynamically and keep your code clean.
Sass or Less let you employ functions or mixins that can pull the rug out from under your over-reliance on inline styles.

When to wield attribute selectors

Attribute selectors can be your best friend when:

You are operating on elements with non-dynamic inline styles where good old class-based styling isn't an option, sad times.
You find that style attributes are regularly used for quick prototyping or testing
SEO needs demand inline styles for content that must be styled in a fixed way.

Building a safety net

When CSS shows its limitations and won't play ball due to selector limitations, reach out for:

JavaScript-based solutions that can handle those more complex style manipulations
CSS-in-JS libraries able to declutter inline styles and offer extended capabilities
Mutation Observers if you need to add styles when elements with specific inline styles are dynamically added to the DOM

Understanding the puzzle of CSS specificity

Knowing your CSS specificity like the back of your hand is key when dealing with inline styles. Here are the facts:

Inline styles have a higher pecking order than the rules laid out in external stylesheets.
Using !important in a stylesheet can jump the queue over inline styles, but this is akin to bringing a bulldozer to a garden party.
Good old planning of CSS architecture can save you from resorting to using inline styles for overriding.

explain-codes / Css / Css selector by inline style attribute

Linked

What is the order of precedence for CSS?



Using CSS ::before and ::after pseudo-elements with inline CSS?



Horizontal line and the right way to code it in HTML, CSS



Span vs DIV (inline-block)



Css to line break before/after a particular `inline-block` item

