Style certain characters with CSS

how to make each letter a different color in css
last letter css
css first-letter
first word css
first-of-type:first-letter css

I'm assuming it's not possible, but just in case it is or someone has a nice trick up their sleeves, is there a way to target certain characters using CSS?

For example make all letters z in paragraphs red, or in my particular case set vertical-align:sup on all 7 in elements marked with the class chord.

That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.

CSS - Change style of a certain letter, If you want you can wrap that specific letter in some tag (with/without class) and use this tag/class to add the css. First, you cannot directly style a character in CSS. You can style based on tag names, ids, classes, pseudo-elements, pseudo-classes and attributes. When styling specific elements with CSS, it is helpful to visualize the HTML code as a family tree with parents, children, and siblings. In the following code example, the tree starts with the html element, which has two children head and body. The head has a child element called title. The body has h1, ul, and p elements as children.

Hi I know you said in CSS but as everybody told you, you can't, this is a javascript solution, just my 2 cents.

best...

JSFiddle

css

span.highlight{
   background:#F60;
    padding:5px;
    display:inline-block;
    color:#FFF;
}

p{
   font-family:Verdana;   
}

html

<p>
    Let's go Zapata let's do it for the revolution, Zapatistas!!!   
</p>

javascript

jQuery.fn.highlight = function (str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z","highlight");

Result

Style a specific word or character? - HTML & CSS, I seem to remember a way to select a specific character or string of characters in CSS, does anyone know what I'm on about? Say I had a  If you use CSS to display any of these characters in HTML, you can use the CSS entity found in the table below. Example <style> h2:after { content: ' \00A7';} </style>

The only way to do it in CSS is to wrap them in a span and give the span a class. Then target all spans with that class.

Best way to style specific characters separately?, Noticed in some of the examples Guil has different styling applied to certain you to repeatedly and consistently create that look through CSS. Inline CSS. An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

As far as I understand it only works with regular characters/letters. For example: what if we want to highlight all asterisk (\u002A) symbols on page. Tried $("p").highlight("u\(u002A)","highlight");in js and inserted &#42; in html but it did not worked.

CSS ::first-letter Selector, The ::first-letter selector is used to add a style to the first letter of the specified selector. Note: The following properties can be used with ::first-letter: font properties  If you want to highlight a specific word or character throughout a page then you could use javascript although this will involve adding an element (throught the script) anyway dougoftheabaci

CSS Selectors Reference, In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector  CSS can't find words or something related to that and it can't automatically just add colors or apply styles. You might use JavaScript, or you can use some server side coding to find out this word '$' and apply some style to that div.

Targeting certain words dynamically with CSS?, Is it possible to target every instance of a particular word and give it it's own style attributes? It wouldn't be across all tags, only a select h1 style. It wouldn’t be across all tags, only a select h1 style. I work with document composition software that handles this type of thing via GREP expressions/styles in a great way and was curious if this was possible using CSS – or perhaps a blend of CSS, JS, HTML. This functionality could be extremely useful in dynamically built sites.

Highlight Certain Number of Characters, The idea was to have 160 characters become “selected” when you click on any letter in a block of text: I didn't think it was possible to “actually”  You can use CSS Grid to create three columns and tell the container to take a maximum width of 70 characters for the middle column which contains our paragraph. .container { display: grid; grid-template-columns: 1fr, 70ch 1fr; } p { grid-column: 2 / 3; }

Comments
  • How about processing the text with JavaScript and adding span elements with some class?
  • no. you would need to use javascript or some preprocessing to add classes to span wrapped characters
  • In pure CSS, the only selector vaguely similar to what you ask is :first-letter
  • Yeah, doing it on the backend is my fallback solution which will be ok, but would've preferred it if there was a clean CSS solution
  • Seems the answer would be no, yes :) I'll accept this when I'm allowed to. I'm already parsing chords in the backend so just have to adjust the output. Just wondered if there was a way the output could remain <span class="c">B7</span> instead of <span class="c">B<span class="7">7</span></span>, which is quite a number of characters just to style two characters :p
  • @Svish Yeah it is pretty hefty, but you are styling chords so that's never going to be the most straightforward thing to achieve :). Hey, don't let a couple of extra span tags ruin your chords :)
  • @Svish Since you have only two letters to style, I suppose using both <span class="c">B7</span> and first-letter you could could accomplish what you want.
  • @xpy that would work if all songs only consisted of B7 chords ;) Unfortunately the 7 can be in a lot of different places and what comes after the first letter can be, and usually is, something else than a 7 :/
  • I may be pushing this a lot but, you could also do something like <span data-chord="b-7">B7</span> and the you could select any chord to style with [data-chord], [data-chord^=b], [data-chord$=7], etc.
  • This is a great solution – Any chance you could update the regex so it does not target the character within attributes? It's breaking a link's href attribute because there's a matching character in the URL linked to. Thanks!
  • are you passing a complete block of text, which contains links inside of it?
  • Yes, when applied to paragraphs. Looks like I avoided the issue by only hitting capital V instead of all v characters, and making sure there were no capital V in any links. I used this to tighten awkward kerning/letter-spacing.
  • what is the "gi" here in RegExp(str, "gi")?
  • I think regular expressions are an extremely brittle solution here: what if you the str you're replacing happens to also occur in interior markup? <p>Let's go Zapata <em class="SNOOZE">pizza?</em></p> (or, highlight('m',…) which would match the m from any em tags etc) Hence the adage "if you have a problem, and solve it with regexps, you now have two problems" :-(