Change styling of part of text

Question

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>
<noscript>
    <a href="http://polldaddy.com/poll/5968383/">
        This is a test question ?
    </a>
</noscript>

The css class which styles the text "This is a test question" is "pds-question-top". Is it possible to style part of this text, ie change the colour of "This" to blue ?

Here it is on jsfiddle : http://jsfiddle.net/25LjE/

You can only style tags and not words. So you'd have to select the word(s) and wrap them inside a tag which you then can style. — Thomas, Jul 03 '12 at 12:08
http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word — Henry, Jul 03 '12 at 12:09
The trick here is that it's being rendered within an iFrame. Your link tag `` doesn't seem to make it into the rendering either. — Brandon Boone, Jul 03 '12 at 12:16

score 1 · Accepted Answer · answered Jul 03 '12 at 13:10

If you have a div like this:

<div class="pds-question-top"> This is a test question ?</div>

you can replace the text with a new text where 'This' is inside a span.

var rp = $('.pds-question-top').text().replace('This', '<span style="color:blue;">This</span>');

$('.pds-question-top').html(rp);

Is not a nice solution but it should be work.

score 0 · Answer 2 · answered Jul 03 '12 at 13:18

Although a JavaScript solution would be nice, see Alex' answer, your text in question is within a noscript tag, meaning any attempts to resolve this with JavaScript won't work.

Alternatively I would recommend wrapping said text in a span element, manually, and then styling that with a class, like so:

Html

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>
<noscript>
    <a href="http://polldaddy.com/poll/5968383/">
        <span class="highlight">This</span> is a test question ?
    </a>
</noscript>

Css

.highlight
{
    color: #0f0;
}

Change styling of part of text

2 Answers2

Html

Css