CSS target all text-transform: uppercase?

Question

I'm wondering if there's a way of targeting all text that has:

text-transform: uppercase;

The idea here is that, typography wise, if you're using all caps you should increase letter spacing for legibility, and it'd be very useful to just target all uppercase text instead of adding a letter spacing attribute to each and every class that has transform:uppercase.

Is this possible with CSS or SASS?

Answer 1

Simple answer: No , CSS cannot detect if the style properties are being set in the DOM. But you can check for the CSS properties with JS which was meant to work with the DOM.

Code snippet:

 var uppercased = document.querySelector('.texta'); var property = window.getComputedStyle(uppercased).getPropertyValue('text-transform'); if (property == 'uppercase') { uppercased.style.letterSpacing = '3px'; }; 

 .texta { text-transform: uppercase; } 

 <div class="texta">Text A</div> <div class="textb">Text B</div> 

Answer 2

It's not possible with CSS or SASS but you could use jQuery like this:

$('*').filter(function() {
    return $(this).css('text-transform') == 'uppercase';
}).css('letter-spacing','1.1em');