can you :first-line pseudo-element a class?

[Troy Piggins]

I have a div class "note" which may or may not be more than one line of
text.

<div class="note">
text text dlkhf sdlkfjdsf
sdlkfj sldkjf sdlkjf sldk jf
dlfkjdlkjfldkjflkdjfljkd
</div>

I want the first line of "note" to be indented more than the others, so
tried this in the stylesheet:

div.note:first-line {
padding-left: 30px;
}

But it seems to have no effect. How do I achieve this? The only
examples I've seen operate on simple tags like p:first-line {...} etc.

PS - I also tried div:first-line.note {...} but no effect either.

Thanks for any pointers.

 

[Mark Parnell]

Deciding to do something for the good of humanity, Troy Piggins

div.note:first-line {
padding-left: 30px;
}

But it seems to have no effect.

That's because padding doesn't apply to :first-line.

"Only the following properties apply to a :first-line pseudo-element:
font properties, color properties, background properties,
’word-spacing’, ’letter-spacing’, ’text-decoration’, ’vertical-align’,
’text-transform’, ’line-height’, ’text-shadow’, and ’clear’."
http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo

It does go on to say that UAs may apply other properties as well, but
that will be different in each browser.

 

[Troy Piggins]

Deciding to do something for the good of humanity, Troy Piggins


That's because padding doesn't apply to :first-line.

"Only the following properties apply to a :first-line pseudo-element:
font properties, color properties, background properties,
?word-spacing?, ?letter-spacing?, ?text-decoration?, ?vertical-align?,
?text-transform?, ?line-height?, ?text-shadow?, and ?clear?."
http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo

It does go on to say that UAs may apply other properties as well, but
that will be different in each browser.

D'oh - sorry about that. Thanks.

Changed to this and it works:

..note:first-letter {
padding-left: 30px;
}

Interestingly this appears (renders?) the same in Firefox:

div.note:first-letter {
padding-left: 30px;
}

but in IE the first letter seems to inherit .note's padding, margin,
border properties etc.

 

[Leif K-Brooks]

I want the first line of "note" to be indented more than the others, so
tried this in the stylesheet:

div.note:first-line {
padding-left: 30px;
}

Use text-indent instead:

div.note {
text-indent: 30px;
}

You should probably also indent with em, not px:

div.note {
text-indent: 2em;
}

 

[Troy Piggins]

Use text-indent instead:

div.note {
text-indent: 30px;
}

You should probably also indent with em, not px:

div.note {
text-indent: 2em;
}

Yep - that's better. Thanks.