Have a phone number:

<div class="phone"> +7(499)111-22-33 </div>

Is it possible to somehow, using only CSS (without interfering with html- markup and not resorting to js ), to change only the area code, say, to make the font in a different color?

Any selector, or something like that.

  • div .phone {color: # c1c1c1} - Aslan Kussein
  • To turn to the letter without wrapping it in tags will not work - toxxxa

3 answers 3

As I understand it, no way. You will have to add an additional <span> or <mark> tag anyway. Without adding tags, it will not work, because inside the div there are no DOM elements, the css line does not work, except for one case: pseudo-selector :first-letter . With it, you can change the first character - + in your case, like this:

 div.phone:first-letter { color: #0f0; }

If you change the markup, then everything is simple:

 div.phone>span.cityCode { color: #0f0; } <div class="phone"> +7(<span class="cityCode">499</span>)110-29-68 </div>

    Will not work.

    CSS selectors work only with whole elements, select some text part and change its properties will not work without additional markup.

      There is a way to crutch with using pseudo-elements (:: before,: after) - the truth for such a bonfire is burning:

       .phone { position: relative; } .phone:before { content: '432'; background-color: #fff; color: #0f0; line-height: 1.2em; position: absolute; top: 0; left: 8px; }

      I repeat once again - the way is a crutch, in fact, it does not change the text, but adds a new entity that closes with itself what needs to be replaced. The method is only suitable for a page with a uniform background (this color will need to be set as the background for the .phone .phone:before ), absolute positioning is also used, and you will need to manually select the top and left positions, and change the font size, but in general any change can break down