The task is to set a separate style for all capital letters in the text label . For example, in

 <label for="dd">Дата РОО</label> label[value*="/AZ/"] { color: #17f; }

Or somehow set the value for the label through the attribute, what would be

 <label for="dd" value="Дата РОО"></label>

instead

 label for="dd">Дата РОО</label>

and then make css for capital letters

Should use only Css or Stylus, without scripts.

    1 answer 1

    The short answer is: it is impossible to do it on pure css. Need to use javascript.

    Long answer:

    The characters in the text are not DOM elements. In css, there are pseudo-elements that are used to style something that is not an independent element. Examples: :: before, :: after, :: first-letter. For example, with the help of :: first-letter you can stylize the first character of an element, with the help of :: first-line - the first line, etc. The full list here

    Theoretically, if the pseudo-element :: caps-letter existed, one could set the style for capital letters in the text. But there is no such element. Therefore, using css is impossible to do.

    Stylus is just syntactic sugar for css generation. Therefore, what can not be done on css, can not be done on Stylus.

    Javascript allows you to create and replace DOM elements. With it, you can replace the contents of the label, displaying each capital letter in the span, which is assigned the desired style.

    • Thank! I was hoping for a label to do the same thing as with input : input[value*="T"] { color: #F90; } input[value*="T"] { color: #F90; } and use regexp to set the value template ... - CodeGust
    • This selector selects input elements whose value contains a "T". He does not select a letter; he selects the entire input. - cronfy
    • yes that's right I wrote that instead of "T" it would be nice to be able to use regexp and somehow combine or have a similarity :first-letter - CodeGust
    • Unfortunately, there is no such thing in css either. I mean selectors using full regex. But on javascript, again, this is achievable. For example, you can extend jquery: m.habrahabr.ru/post/165197 - cronfy