matching nth child

06-18-2007

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

06-18-2007

"Jon Slaughter" <> wrote in message
news:T5ldi.14830$ t...
> 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.

06-18-2007

"Jon Slaughter" <> wrote in message
news:T5ldi.14830$ t...
> 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.

06-18-2007

"Jon Slaughter" <> wrote in message
news:T5ldi.14830$ t...
> 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 ;/

06-18-2007

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

06-18-2007

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

> "Jon Slaughter" <> wrote in message
> news:T5ldi.14830$ t...
> > 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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Check, if css3 selector nth-child(odd) is supported	Peter	Javascript	9	07-07-2009 10:07 PM
nth child	Jon Slaughter	HTML	0	06-27-2007 09:13 PM
Algorithm to find nth largest or nth smallest in a range	Code4u	C++	4	07-13-2005 03:18 AM
How do I: Main thread spawn child threads, which child processes...control those child processes?	Jeff Rodriguez	C Programming	23	12-09-2003 11:06 PM
This is for the nth time I am posting. Is there no one to help!	ani	ASP .Net	4	11-06-2003 03:30 PM