What does a CSS selector in square brackets select in HTML?

Question

So I have seen this CSS rule-set in a library:

[text-uppercase] {
   text-transform: uppercase;
}

and I am not sure on how to use it in a div

<div class="text-uppercase | [text-uppercase]"></div>

I have tried both, but neither are working. I am seeing this in ionic2.

Answer 1

For the selector to work:
<div text-uppercase></div>

[text-uppercase] selector matches an attribute on a tag.

Answer 2

It's not a class, you encountered a so called attribute selector. It matches every html element that has got that attribute set, whatever the value. I.e. <section text-uppercase="true">, <div text-uppercase="something">, <nav text-uppercase>…

Look at the reference provided on the link above for more advanced usage scenarios.

[text-uppercase] {
  text-transform: uppercase;
}

<span text-uppercase>hello</span>