Colouring a specific character through CSS

Question

What I am after is to colour in just one character of my code throughout the page.

The lines between each of the words are what I would like to be a different colour fro

Answer 1

Another solution would be encapsulating the text (not the separators) inside <span/>s, and use :after pseudo-element to create the separator.

Then, specify that, for the last element, the separator is not required:

HTML

<div class="separator">
    <span>Anti-virus End Point</span>
    <span>Disk Encryption</span>
    <span>UTM</span>
    <span>Email and Web Security</span>
</div>

CSS

.separator > span:not(:nth-last-child(1)):after {
    content: ' | ';
    color:#00FF00;
}

Demo: http://jsfiddle.net/j9kZS/1/

Answer 2

AFAIK there is no pure CSS solution for this. If you are using jQuery it would probably be easiest to make use of the highlight plugin for this: http://bartaz.github.io/sandbox.js/jquery.highlight.html

Answer 3

If you wrap each of the | character in a span with a class you can use that:

<span class="separator">|</span>

.separator {
    color: #0F0;
}

Answer 4

try this

http://jsfiddle.net/v9Vbc/2/

css

 .divider {
     color:#00FF00;
     }

html

try <span class="divider">|</span> try

Answer 5

Another solution with pure js:

<style>
    .paint{
        color: #00FF00;
    }
</style>
<div id="result"></div>
<script>
        var str = "Anti-virus End Point | Disk Encryption | UTM | Email and Web Security";
        str = str.split('|').join('<span class="paint">|</span>');
        document.getElementById("result").innerHTML = str;
</script>