matching nth child

Discussion in 'HTML' started by Jon Slaughter, Jun 18, 2007.

  1. Is there any way to match the nth child in css < 3? Obviously I can do
    first-child but I can't seem to get any other siblings ;/
    I tried something .myclass:first-child + div

    for something like

    <div class="myclass">
    <div>First child</div>
    <div>Second child</div>
    </div>

    but it doesn't work ;/

    Thanks,
    Jon
     
    Jon Slaughter, Jun 18, 2007
    #1
    1. Advertising

  2. "Jon Slaughter" <> wrote in message
    news:T5ldi.14830$...
    > Is there any way to match the nth child in css < 3? Obviously I can do
    > first-child but I can't seem to get any other siblings ;/
    > I tried something .myclass:first-child + div
    >
    > for something like
    >
    > <div class="myclass">
    > <div>First child</div>
    > <div>Second child</div>
    > </div>
    >
    > but it doesn't work ;/
    >
    > Thanks,
    > Jon
    >


    BTW, I know above int he example one could do

    ..myclass>div + div

    but that is not what I'm looking for as its not very robust. (if I end up
    adding a third child div then it screws up everything.
     
    Jon Slaughter, Jun 18, 2007
    #2
    1. Advertising

  3. "Jon Slaughter" <> wrote in message
    news:T5ldi.14830$...
    > Is there any way to match the nth child in css < 3? Obviously I can do
    > first-child but I can't seem to get any other siblings ;/
    > I tried something .myclass:first-child + div
    >
    > for something like
    >
    > <div class="myclass">
    > <div>First child</div>
    > <div>Second child</div>
    > </div>
    >
    > but it doesn't work ;/
    >
    > Thanks,
    > Jon
    >
    >


    The main thing I need is a second-child like selector and not really an
    nth-child and I want to avoid having to specify the class of the the second
    div.
     
    Jon Slaughter, Jun 18, 2007
    #3
  4. "Jon Slaughter" <> wrote in message
    news:T5ldi.14830$...
    > Is there any way to match the nth child in css < 3? Obviously I can do
    > first-child but I can't seem to get any other siblings ;/
    > I tried something .myclass:first-child + div
    >
    > for something like
    >
    > <div class="myclass">
    > <div>First child</div>
    > <div>Second child</div>
    > </div>
    >
    > but it doesn't work ;/
    >
    > Thanks,
    > Jon
    >
    >


    Another this that I could do is first-child of first child but when I do
    something like myclass:first-child:first-child it does not select the right
    div.

    basically doing it this way instead

    <div class="myclass">
    <div>First child
    <div>Second child</div>
    </div></div>


    But the selector doesn't get the second child ;/
     
    Jon Slaughter, Jun 18, 2007
    #4
  5. Jon Slaughter

    dorayme Guest

    In article <T5ldi.14830$>,
    "Jon Slaughter" <> wrote:

    > Is there any way to match the nth child in css < 3? Obviously I can do
    > first-child but I can't seem to get any other siblings ;/
    > I tried something .myclass:first-child + div
    >
    > for something like
    >
    > <div class="myclass">
    > <div>First child</div>
    > <div>Second child</div>
    > </div>
    >
    > but it doesn't work ;/
    >
    > Thanks,
    > Jon


    Last child works in some browsers. But why trust any of it, just
    class things and be safe.

    Try this in different browsers:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style type="text/css">
    ul li:first-child {color: blue}
    ul li:last-child {color: red}
    </style>
    </head>
    <body>
    <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    </ul>
    </body>
    </html>

    Nice in FF.

    --
    dorayme
     
    dorayme, Jun 18, 2007
    #5
  6. Jon Slaughter

    dorayme Guest

    In article <4aldi.14835$>,
    "Jon Slaughter" <> wrote:

    > "Jon Slaughter" <> wrote in message
    > news:T5ldi.14830$...
    > > Is there any way to match the nth child in css < 3? Obviously I can do
    > > first-child but I can't seem to get any other siblings ;/
    > > I tried something .myclass:first-child + div
    > >
    > > for something like
    > >
    > > <div class="myclass">
    > > <div>First child</div>
    > > <div>Second child</div>
    > > </div>
    > >
    > > but it doesn't work ;/
    > >
    > > Thanks,
    > > Jon
    > >
    > >

    >
    > The main thing I need is a second-child like selector and not really an
    > nth-child and I want to avoid having to specify the class of the the second
    > div.


    Try ol li:first-child + li {...}

    I modify my last to include the idea:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style type="text/css">
    ol li:first-child {color: blue}
    ol li:last-child {color: red}
    ol li:first-child + li {color: yellow}
    </style>
    </head>
    <body>
    <ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    </ol>
    </body>
    </html>

    --
    dorayme
     
    dorayme, Jun 18, 2007
    #6
    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. ani
    Replies:
    4
    Views:
    1,240
  2. Jeff Rodriguez
    Replies:
    23
    Views:
    1,180
    David Schwartz
    Dec 9, 2003
  3. Code4u
    Replies:
    4
    Views:
    2,684
    Stephen Howe
    Jul 13, 2005
  4. Jon Slaughter

    nth child

    Jon Slaughter, Jun 27, 2007, in forum: HTML
    Replies:
    0
    Views:
    458
    Jon Slaughter
    Jun 27, 2007
  5. Peter
    Replies:
    9
    Views:
    448
    David Mark
    Jul 7, 2009
Loading...

Share This Page