matching nth child

Jon Slaughter · Jun 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

Jon Slaughter · Jun 18, 2007

Jon Slaughter said:
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

Jon Slaughter said:
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

Jon Slaughter said:
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 ;/

dorayme · Jun 18, 2007

"Jon Slaughter said:
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 · Jun 18, 2007

"Jon Slaughter said:
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>

Incrementing getelementbyid	1	Jan 6, 2022
Clickable Div Block	1	Oct 13, 2023
Border attribute not working	1	Sep 3, 2018
How to make a div select work?	5	Jan 13, 2022
How can I output an array in sequence to various div's?	2	Dec 29, 2022
[C#] Extend main interface on child level	0	Aug 31, 2023
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Only one table shows up with the information	2	Mar 29, 2023

matching nth child

Jon Slaughter

Jon Slaughter

Jon Slaughter

Jon Slaughter

dorayme

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads