Apply style only on child elements in the first level

Question

<ul> <li> <span> apply </span> </li> <li> <span> apply </span> </li> <li> <ul> <li> <span> ignore </span> </li> <li> <span> ignore </span> </li> </ul> </li> </ul>

How can I apply a CSS rule only to span elements from the first level, and make span elements from the nested list ignore the rule?

Can this be done without specifically resetting the properties on the 2nd level spans?

Tried ul > li span but it doesn't seem to work, I get the styles applied to 2nd level too

See my answer. You can use that as the starting point for your selector. — James Allardice
– James Allardice, Commented Apr 23, 2012 at 14:38
@Alex It matters because any rule to effect only the first-level children of ul will effect first-level children of every ul element, therefore we would have to specify a parent element of the ul to style, so it is selectable. — squarephoenix
– squarephoenix, Commented Apr 23, 2012 at 14:41

sp00m · Accepted Answer · 2013-11-28 17:08:00Z

24

Put your list in a wrapping div with an ID, for example <div id="ul-wrapper">, and try:

#ul-wrapper > ul > li > span { /* my specific CSS */ }

edited Nov 28, 2013 at 17:08

answered Apr 23, 2012 at 14:36

sp00m

49k31 gold badges152 silver badges263 bronze badges

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

Comments

aghoshx · Accepted Answer · 2012-04-23 14:36:54Z

 #container > ul > li span { /* - Your CSS Here - */ }

Need to specify a container, so that only the first level ul may be selected.

James Allardice · Accepted Answer · 2012-04-23 14:37:11Z

As long as the parent of the outer ul isn't another li, you can use that as the starting point for your selector (example assuming it's a div):

div > ul > li span { /* Whatever */ }

Arion · Accepted Answer · 2012-04-23 14:42:54Z

0

ul > li > span {border:solid 1px red;} li > ul > li > span {border:none 1px red;};

edited Apr 23, 2012 at 14:42

Arion

31.3k10 gold badges74 silver badges89 bronze badges

answered Apr 23, 2012 at 14:37

rt2800

3,0552 gold badges22 silver badges26 bronze badges

1 Comment

James Allardice Over a year ago

From the question: "Can this be done without specifically resetting the properties on the 2nd level spans?"

Collectives™ on Stack Overflow

Apply style only on child elements in the first level

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related