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

Discussion in 'HTML' started by Troy Piggins, Feb 22, 2006.

  1. Troy Piggins

    Troy Piggins Guest

    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.

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
    Troy Piggins, Feb 22, 2006
    #1
    1. Advertising

  2. Troy Piggins

    Mark Parnell Guest

    Deciding to do something for the good of humanity, Troy Piggins
    <> declared in alt.html:

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

    --
    Mark Parnell

    Now implementing http://blinkynet.net/comp/uip5.html
    Mark Parnell, Feb 22, 2006
    #2
    1. Advertising

  3. Troy Piggins

    Troy Piggins Guest

    * Mark Parnell wrote:
    > Deciding to do something for the good of humanity, Troy Piggins
    ><> declared in alt.html:
    >
    >> 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.


    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.

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
    Troy Piggins, Feb 22, 2006
    #3
  4. Troy Piggins wrote:
    > 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;
    }
    Leif K-Brooks, Feb 22, 2006
    #4
  5. Troy Piggins

    Troy Piggins Guest

    * Leif K-Brooks wrote:
    > Troy Piggins wrote:
    >> 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;
    > }


    Yep - that's better. Thanks.

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
    Troy Piggins, Feb 22, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jonathan N. Little
    Replies:
    1
    Views:
    493
    Jonathan N. Little
    Nov 2, 2005
  2. bongo

    pseudo-element: first-line

    bongo, Dec 9, 2006, in forum: HTML
    Replies:
    3
    Views:
    330
    Bergamot
    Dec 9, 2006
  3. Richard Schneeman
    Replies:
    16
    Views:
    453
    Daniel Bush
    Aug 27, 2008
  4. Fungii
    Replies:
    6
    Views:
    152
  5. Anthony Papillion
    Replies:
    0
    Views:
    109
    Anthony Papillion
    Sep 2, 2013
Loading...

Share This Page