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.

Go through this link for more information http://learn.shayhowe.com/advanced-html-css/complex-selectors/ — Rishal
– Rishal, Commented Oct 6, 2016 at 11:57

miken32 · Accepted Answer · 2017-09-28 17:19:33Z

27

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

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

edited Sep 28, 2017 at 17:19

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Oct 6, 2016 at 11:55

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

christo · Accepted Answer · 2016-10-06 12:03:23Z

14

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>

answered Oct 6, 2016 at 12:03

christo

4871 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related