3

I am looking for a way to apply new CSS to only part of the element.

For example. The original HTML looks like

<p>123456</p>

I want to make only 456 into bold.

Of course, I can do it by adding another tag into 456 like

<p>123<b>456</b></p>

But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.

To do that, I am thinking of adding new custom attribute to the existing tag like

<p data-wms="e-3">123456</p>

Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)

Now I have all the information about where to change inside the element.

But still, how can I do that with javascript without adding a tag, without changing dom.

Thanks

Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
Jeehoon Park
  • 61
  • 1
  • 8
  • 1
    Does this answer your question? [:nth-letter pseudo-element is not working](https://stackoverflow.com/questions/24705721/nth-letter-pseudo-element-is-not-working) – maxshuty Mar 14 '21 at 01:09
  • 1
    The functionality you're after is not possible, to change the style of characters in code, you have to wrap those characters in a separate tag for special styling – a.mola Mar 14 '21 at 01:10
  • 1
    Why are you reluctant to change the structure, i.e. to wrap `` around parts of your inner text? – Lajos Arpad Mar 14 '21 at 01:24
  • 1
    @Lojos Arpad My application remembers original dom structure and add different css to different dom elements. If orginal dom changes, I have to trace its impact to other applying. I don't want to do that. – Jeehoon Park Mar 14 '21 at 04:16
  • 1
    @a.mola thanks for your advice. After checking maxshuty comment and following research, ::nth-letter is not still implemented and there is no way to apply different css letter by letter without embracing each one by span tag at this point. – Jeehoon Park Mar 14 '21 at 04:18
  • 1
    @maxshulty Thanks for your advice. Thanks to your advice, I recognized nth-letter initiative. Unfortunately, however, I found that they are not implemented in the browsers yet. They are just proposals at this moment. So I now know that there is no such css functionality and I have to loose my constraint: Not controlling letter by letter but controlling element by element. – Jeehoon Park Mar 14 '21 at 04:21

3 Answers3

0

You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.

An example would be:

<p>123<span class="bold-highlight">456</span></p>
kengru
  • 89
  • 8
0

Thanks to everyone's advice, I researched more, especially about nth-letter.

Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.

Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.

I think that I have to re-design my project...

Jeehoon Park
  • 61
  • 1
  • 8
-1

if it's a static page and you want to change a style for specific text in a specific tag like the following case

<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>

let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter

$( "p:nth-child(3)" ).css("color","#f00");
Abdlrahman Saber
  • 144
  • 1
  • 7