How to target individually nested elements using CSS

Question

I'm trying to target each span individually in a structure like below. I've tried nth-child() & nth-of-type() but it didn't work, it was only applying the first style to all of the spans. Anyone no know how to do this without giving each a separate IDs?

<div>
  <div>
    <span></span>
  </div>
  <div>
    <span></span>
  </div>
  <div>
    <span></span>
  </div>
</div>

If you didn't put the spans in divs, nth-child would work.. Putting single spans in divs is rather redundant. — Josh Crozier
– Josh Crozier, Commented Aug 31, 2013 at 18:26

Hushme · Accepted Answer · 2013-08-31 18:25:24Z

2

try this

div > div:nth-of-type(n) > span {

}

where (n) will be number of the div

answered Aug 31, 2013 at 18:25

Hushme

3,1541 gold badge22 silver badges27 bronze badges

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

2 Comments

Hushme Over a year ago

@Travis he want to target span individually by its parent div how can it be done without it

Hushme Over a year ago

@Travis yes my first expression was that too, that you have misread the question

Nitesh · Accepted Answer · 2013-08-31 18:30:07Z

1

Try this

div>div>span{

}

answered Aug 31, 2013 at 18:30

Nitesh

4843 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to target individually nested elements using CSS

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