CSS: Selecting the nth element by using an ID?

Question

This is my HTML:

<dl id="id">
    <dt>test</dt>
    <dd>whatever</dd>
    <dt>test1</dt>
    <dd>whatever2</dd>
    ....
</dl>

I want to select the third dd but I cant make it work. This is what I tried:

dl#id dd:nth-child(3) {  
     color: yellow;
}

The style is not applied, whats wrong?

Thanks!

Uhh, there is no DD that's a third child, you'll have to change it to nth-child(6) to match that DD. You'll have to use :nth-of-type to match the element and which number it is. — Kyle
– Kyle, Commented Apr 24, 2013 at 11:35

Jon · Accepted Answer · 2013-04-24 11:34:07Z

6

The 3rd child of #id is actually the <dt>test1</dt>, so the selector does not match anything.

It would be more appropriate to use the :nth-of-type selector here:

dl#id dd:nth-of-type(3)

It is also possible to take advantage of the rather rigid HTML structure (pairs of <dt>/<dd>) and simply write dl#id :nth-child(6), but in this case it's pointless (browser support is AFAIK the same for both selectors).

answered Apr 24, 2013 at 11:34

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1856596 Over a year ago

Yeah, thats it, thanks! Is there a way to continue from that selected element? Like dl#id dd:nth-of-type(3) li

BoltClock Over a year ago

@user1856596: If the li is in a list within the dd, sure.

MentholBonbon · Accepted Answer · 2013-04-24 13:49:51Z

-1

You could also do it with jquery:

$("dl#id dd")

This would give you all the dd within the dl. With an index you can then access the nth element For the third this would be:

$("dl#id dd").eq(2)

You can then add a style property:

$("dl#id dd").eq(2).css("color", "yellow")

I hope this answered your question

edited Apr 24, 2013 at 13:49

answered Apr 24, 2013 at 11:47

MentholBonbon

7554 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS: Selecting the nth element by using an ID?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related