Question

HTML:

<p>
    <span>blah</span>
    blah
    <span>blah</span>
    lorum ipsum
    <br>
    <span>blah</span>
    blah
    <span>blah</span>
    lorum ipsum
</p>

Given this HTML, is there any way that I can style all of the blah one color (inside and outside the spans) and style the remaining text a different color? It must be a pure CSS solution with support for IE7 and above.

Obviously I can do something like this:

p {
    color:#000;
}
p span {
    color:#f00;
}

but this leaves one blah black.

Answer 1

Is there any way that I can style all of the blah one color, and style the remaining text a different color?

There’s no way of doing this with pure CSS.

You’ll either need to change your markup (add another semantic span), or use some JavaScript to modify the markup at runtime.

As a long shot, if your span text is all on the first line, you could style :first-line.