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

So, I saw this CSS rule set in the library:

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

and I'm not sure how to use it in a div

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

I tried both, but none of them work. I see this in ionic2.

+8
source share
2 answers

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

Selector

[text-uppercase] matches the tag attribute.

+13
source

This is not a class, you are faced with the so-called attribute selector . It corresponds to each html element that has this attribute, regardless of value. That is, <section text-uppercase="true"> , <div text-uppercase="something"> , <nav text-uppercase> ...

See the link in the link above for more complex use cases.

 [text-uppercase] { text-transform: uppercase; } 
 <span text-uppercase>hello</span> 
+9
source

All Articles