CSS text-transform except certain character/string

Question

Is there a way I can make an exception to text-transform: lowercase; such that the word 'I' (i.e. a space, followed by the letter I, followed by a space) would still be rendered as a capital?

Thanks.

m4n0 · Accepted Answer · 2015-09-10 11:54:38Z

3

If you can wrap the I inside a span tag, you can override the case.

.text {
  text-transform: lowercase;
}
.text span {
  text-transform: uppercase;
}

<div class="text">All lowercase BUT <span>I</span> is uppercase</div>

answered Sep 10, 2015 at 11:54

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

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

3 Comments

Luke Bosman Over a year ago

Thanks. That's essentially what I'm doing right now with: .pronounI {text-transform: uppercase !important;} and <span class="pronounI">I</span> I was hoping there may be a way to automate this in CSS.

m4n0 Over a year ago

Unfortunately, CSS cannot select text nodes. No vanilla CSS solution for it.

Luke Bosman Over a year ago

OK. Thanks. At least I now know to stop looking.

Stephen · Accepted Answer · 2018-09-07 13:45:42Z

0

Try this:

p {
   text-transform: lowercase;
}

p::first-letter {
    text-transform: uppercase;
}

answered Sep 7, 2018 at 13:45

Stephen

312 bronze badges

Collectives™ on Stack Overflow

CSS text-transform except certain character/string

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related