Is there a way in CSS to capitalize specific letters of text?

Question

For a given text node on a page...

abcdefghijklmnop

You can capitalize all letters with this:

selector { text-transform : uppercase; } /* Output: ABCDEFGHIJKLMNOP */

You can capitalize just the first letter with this:

selector { display : block; } selector:first-letter { text-transform: capitalize; } /* Output: Abcdefgijklmnop */

Is there any way to capitalize specific letters in the string besides the first letter? Example:

/* Pseudo code */ selector:nth-character(odd) { text-transform : uppercase; } /* Output: aBcDeFgHiJkLmNoP */

A simple google would answer this for you, and the answer is no. You need Javascript. — Chrillewoodz
– Chrillewoodz, Commented Aug 21, 2015 at 18:10
I think you need this: letteringjs.com Not possible with pure CSS. — m4n0
– m4n0, Commented Aug 21, 2015 at 18:10
Agree with the other comments, I'm afraid this is not possible with CSS alone as it cannot select text nodes. The only way this could be done with CSS is by changing the HTML and surrounding the letters in elements. — Hidden Hobbes
– Hidden Hobbes, Commented Aug 21, 2015 at 18:18
@Chrillewoodz Thank you for telling me that Google exists. Of course, when I Google this question in there, this very SO page the most relevant result I get. :) — Jake
– Jake, Commented Aug 21, 2015 at 18:23

m4n0 · Accepted Answer · 2015-08-21 18:28:30Z

It is not possible currently with pure CSS. But you can use the letteringjs.com plugin to implement it. You can read the Lettering.js Docs

$(document).ready(function() { $(".custom-caps").lettering(); });

.custom-caps > span:nth-child(even) { text-transform: uppercase; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script> <div class="custom-caps">abcdefghijklmnop</div>

HTML:

<div class="custom-caps">abcdefghijklmnop</div>

Rendered HTML:

<div class="custom-caps"> <span class="char1">a</span> <span class="char2">b</span> <span class="char3">c</span> <span class="char4">d</span> <span class="char5">e</span> <span class="char6">f</span> <span class="char7">g</span> <span class="char8">h</span> <span class="char9">i</span> <span class="char10">j</span> <span class="char11">k</span> <span class="char12">l</span> <span class="char13">m</span> <span class="char14">n</span> <span class="char15">o</span> <span class="char16">p</span> </div>

Collectives™ on Stack Overflow

Is there a way in CSS to capitalize specific letters of text?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related