CODEWITHSUNDEEP
css
Svish
Svish

Reputation: 157991

Style certain characters with 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.

Upvotes: 54

Views: 65262

Answers (6)

eapo
eapo

Reputation: 1081

As many referred "That's not possible in CSS.", and the plain JavaScript code is generally faster and uses fewer resources compared to the jQuery code.

Plain JavaScript solution

const paragraphs = document.getElementsByTagName("p");
const substringToHighlight = "sz"; // the substring to be highlighted
const regex = new RegExp(substringToHighlight, "gi");
for (let i = 0; i < paragraphs.length; i++) {
  const paragraph = paragraphs[i];
  const text = paragraph.innerHTML;
  const newText = text.replace(regex, (match) => {
    return `<span class="highlight">${match}</span>`;
  });
  paragraph.innerHTML = newText;
}
span.highlight{
   background:#F60;
    padding:5px;
    display:inline-block;
    color:#FFF;
}

p {
    font-family: 'BeingHumannormalhuman';
    font-weight: normal;
    font-style: normal;
}
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/being-human" type="text/css"/>

<p>
    Let's go Szeklers let's do it for the freedom of Szeklerland!!!
</p>

Upvotes: 0

Neil Stockbridge
Neil Stockbridge

Reputation: 606

In reply to @ncubica but too long for a comment, here's a version that doesn't use regular expressions and doesn't alter any DOM nodes other than Text nodes. Pardon my CoffeeScript.

# DOM Element.nodeType:
NodeType =
  ELEMENT:    1
  ATTRIBUTE:  2
  TEXT:       3
  COMMENT:    8

# Tags all instances of text `target` with <span class=$class>$target</span>
#
jQuery.fn.tag = (target, css_class)->
  @contents().each (index)->
    jthis = $ @
    switch @.nodeType
      when NodeType.ELEMENT
        jthis.tag  target, css_class
      when NodeType.TEXT
        text = jthis.text()
        altered = text.replaceAll  target, "<span class=\"#{css_class}\">$&</span>"
        if altered isnt text
          jthis.replaceWith  altered

($ document).ready ->
  ($ 'div#page').tag '⚀', 'die'

Upvotes: 1

ratigumashvili
ratigumashvili

Reputation: 9

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.

Upvotes: 0

ncubica
ncubica

Reputation: 8475

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 enter image description here

Upvotes: 38

Boy Buysman
Boy Buysman

Reputation: 11

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.

Upvotes: 1

Mathew Thompson
Mathew Thompson

Reputation: 56429

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.

Upvotes: 24

Related Questions