styling the first line in the last paragraph using css

Question

How do i make the first sentence in the last paragraph bold using css? I also want to add extra padding to the top of this last paragraph so that it will wrap around an image. If I increase the padding on the bottom of the floated image, the paragraph does not wrap to the bottom flush left margin of the image, it just flows along the right of it -- not what I want. I tied a class to the "p" element since I only want to effect the a certain paragraph (and I don't see a ":last-child" pseudo-element nor do I know if you can use two pseudo-elements on one element or class).

#wf_mainContent_left p.last_wfp:first-line {
padding-top:20px;
font-weight:bold;
color:red;
}

HTML

<p class="last_wfp">This is the first sentence that I want bold and red. This is the second
 sentence that I don't want that treatment.</p>

This bolds both sentences when I only want the first sentence, even though they are on the same line. This should be able to be done according to this tutorial. And there is no effect on the padding. I've tried adding a <br> tag but it adds to much space. And I tried styling the <br> tag but that's not possible according to this post that I just read. At any rate, I just want the first line to be bold, not both sentences.

Answer 1

(and I don't see a ":last-child" pseudo-element nor do I know if you can use two pseudo-elements on one element or class)

:last-child is a CSS3 pseudo-class. It is not a pseudo-element, so you can always attach :first-line to a selector with it.

If you're not worried about browser compatibility, you can easily use this:

#wf_mainContent_left p:last-child:first-line {
    padding-top:20px;
    font-weight:bold;
    color:red;
}

If you need compatibility, stick with your existing CSS class solution.

As for the br producing too much whitespace, see if you can decrease the line-height of your p.

Answer 2

@BoltClock has the CSS answers.

If you are looking for cross-browser compatibility and you are willing to use js, you can do the following:

CSS

.last_bold{
    font-weight:bold;
    color:red;
    padding-top:2em;
    display:inline-block;
}

var a = $('.last_wfp').text();
var b = a.split('. ');

$('.last_wfp').html('<span class="last_bold">' + b[0] + '</span>' + '. ' + b[1]);

EDIT

Per mr.nicksta's observation:

potentially more efficient to look for first index of a period and then create a substring from the start to that position? and this approach assumes only two sentences per paragraph element, any further sentences are lost.

Here is the revised code, that should handle any # of sentences.

var a = $('.last_wfp').text();
var b = a.slice(0, a.indexOf('. '));
var c = a.slice(a.indexOf('. '), a.length);

$('.last_wfp').html('<span class="last_bold">' + b + '</span>' + c);

Revised example: http://jsfiddle.net/jasongennaro/3ZKP9/5/