#1
  1. Rosy Cheeked
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    Cleveland, UK
    Posts
    361
    Rep Power
    22

    contextual selection using pseudo elements


    If i have the following html:

    PHP Code:
    <div id="centre">

    <
    h2>Header</h2>

    <
    p>Lorem ipsum appareat definiebas has euEam consul ancillae ex.</p>

    <
    pSumo percipit instructior te meiEst diceret convenire periculis adid vix facilisis sadipscing.</p>

    <
    p>Ei per aeque petentium tinciduntposse inimicus ad sit.</p>

    </
    div
    I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements:

    PHP Code:
    div#centre p:first-child:first-letter
    {
       
    etc.

    But this obviously won't work, because the <p> ain't first.

    I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection,

    It seems the equivalent of second:child (which is what i want) will be available in css3,

    Even ideas would be great,
    Cheers
    Last edited by Three; January 8th, 2005 at 11:10 AM.
    Control post quality through the power of rep' ()
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    67
    Rep Power
    15
    It's possible in some modern browsers that get the CSS2 specification completely right to use the: first-letter pseudo-class to access the first letter of the parapgraph - without adding the extraneous <span> element. While it's sematically superior, th eeffect would unfortunately not appear in many browsers.
  4. #3
  5. Rosy Cheeked
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    Cleveland, UK
    Posts
    361
    Rep Power
    22
    Yeah, I know, I go with semantics each time, I consider these styling features perks to users with enough sense to use a modern brower... adding a span is just not going to happen.

    Infact the reason my problem exists atm, is that I consider having the header inside the div more semantically correct than outside.
    Control post quality through the power of rep' ()

IMN logo majestic logo threadwatch logo seochat tools logo