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.

BoltClock · Answer 1 · 2011-10-03T17:53:30.637

3

(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.

edited Oct 03 '11 at 17:53

answered Oct 03 '11 at 17:46

BoltClock

700,868
160
1,392
1,356

BoltClock, thanks very much for details! You answered my question about using two pseudo-class (I get element and class mixed up). I have to code for IE7 compatibility. The whole content of this HTML is peppered with small treatments of bold and colored text (to show emphasis, etc.). I hate that I can't isolate the first sentence. CSS first-line means just that, if my container can fit more than one sentence on a line, then the whole line gets the style. I have to use span tags. – Chris22 Oct 03 '11 at 18:07
BoltClock, thanks! I wish I could, but reducing the line-height would go against the specs for the content readability. – Chris22 Oct 03 '11 at 18:51

Jason Gennaro · Accepted Answer · 2011-10-03T18:53:28.593

1

@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/

edited Oct 03 '11 at 18:53

answered Oct 03 '11 at 17:49

Jason Gennaro

34,535
8
65
86

Jason, thanks. I think i'll use this solution since I have a few paragraphs throughout the static site that will need this treatment. is it possible to tag two answers? – Chris22 Oct 03 '11 at 18:10
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. see http://jsfiddle.net/3ZKP9/3/ – WickyNilliams Oct 03 '11 at 18:10
mr. nicksta, thanks for your comment. i've marked this question answered and just checked my code. fortunately, the paragraphs are all just two sentences, but thanks for pointing out. i'm learning js and jquery. how would you write **look for first index of a period and then create a substring from the start to that position**? – Chris22 Oct 03 '11 at 18:46
@Chris22 I've made the edits based on mr.nicksta's comments. – Jason Gennaro Oct 03 '11 at 18:55
no problem guys, good work on the revision Jason. With a little more code you could make this a jQuery plugin that will work for any element, any number of elements and could accept options to customise behaviour :) i was bored (and i've been loving writing jQuery plugins recently) so i took the liberty: http://jsfiddle.net/3ZKP9/8/ ENJOY! – WickyNilliams Oct 03 '11 at 22:30

score 0 · Answer 3 · answered Oct 03 '11 at 18:01

The first-line pseudo element represents the first formatted line of your text. It should be in a block-level element, an inline block, a table caption, or a table cell.

It doesn t take care of your sign (dot carriage return...), only based on formatting and block size.

Be careful at browser's compatibility. You ll find a good picture there : http://reference.sitepoint.com/css/pseudoelement-firstline

See other answer for the other part of your question I ll not do a copy paste

styling the first line in the last paragraph using css

3 Answers3