CODEWITHSUNDEEP
javascriptcss
j_d
j_d

Reputation: 3082

CSS target all text-transform: uppercase?

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?

Upvotes: 2

Views: 457

Answers (2)

Eaten by a Grue
Eaten by a Grue

Reputation: 22931

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');

Upvotes: 1

m4n0
m4n0

Reputation: 32255

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>

Upvotes: 3

Related Questions