Logotyp för Mirello Media — en webbyrå i Borås

Using style as a selector
— accurate overrides of inline styles

Written by

I occasionally find myself in situations where inline styles on elements screw over my otherwise inheritance-based CSS. Sometimes it's caused by some plugin someone decided to implement, sometimes it's caused by a WYSIWYG-editor manoeuvred by the client. You know what I'm talking about.

<div class="product__description"> <h1 style="font-size: 25px;">Lorem ipsum dolor sit amet</h1> <p style="font-size: 12px">consectetur adipisicing elit. <span style="font-size: 13px">Pariatur hic ad eligendi,</span> praesentium ex <strong style="font-family: Verdana; font-size: 12px">dolores asperiores</strong>, a quae molestiae ratione aut blanditiis est voluptatum rem voluptates beatae ea!</p> <ul style="font-size: 12px"> <li style="font-size: 16px; font-weight: bold">Alias ut beatae optio quasi, porro blanditiis mollitia quibusdam sit nam earum sapiente dicta, explicabo animi.</li> <li style="font-size: 16px;">Ut nobis reprehenderit laboriosam sapiente sunt hic</li> <li style="font-size: 16px;">Placeat voluptatum libero mollitia beatae ipsum temporibus perferendis labore ipsa</li> </ul> <div>

Don't you just love this?

Yuck.

Luckily, there are plenty of ways to get rid of it. If the content is stored in a database then ideally you'd purge if from the database, or clean it up as you fetch the data. But for whenever you can't, don't want to or when it's just not applicable, you'd have to rely to CSS overrides.

When writing these CSS overrides, I used to select their closest parent element to create a descendant selector for every tag that needed cleaning.

For example, resetting the font-size of the clutter above would require:

.product__description h1, .product__description p, .product__description ul, .product__description li, .product__description span, .product__description strong, { font-size: inherit !important; }

It's a clumsy method not only because you'll have to manually type out every type of element, but also and primarily because it affects every element of those types – not just the elements with inline styles.

A better approach

A far better approach is to use the style attribute as a selector and have it match the very attribute we want to override.

Check this out:

[style*="font-size"] { font-size: inherit !important; }

The *= makes this selector match any element with a style attribute that contains the substring "font-size".

This selector resets the font size of every element with inline font-size styles on the entire page to inherit their closest parent's font-size. I usually don't mind this, but it could be combined with a regular descendant- or child selector for a local override.

Use this to override any CSS property without inadvertently affecting other elements.

Here's a demo.

Variations of this could include selecting inline styles by value, or chained into element types, or even combinations of inline styles. The right value isn't always inherit. You could use this to pre-select element types with inline styles and set their values to the default values to essentially forbid inline styles.

As for browser support, rest assured. These attribute selectors are supported in every browser since IE7, which should allow mostly everybody to rely on them.

Thanks for reading!

Porträtt av Nils Kaspersson

Nils Kaspersson

comments powered by Disqus