CSS3: Differences in child styling

Question

I'm not sure if my question title accurately displays what I'm trying to ask, but this is pretty much my first exposure to CSS3 and have been exploring various projects people have done in order to gain some hands on experience.

In searching through these projects I cam across something I'm having some trouble understanding. What exactly is the difference between the following two lines:

#random_ID > ul > li > a { ... }

#random_ID ul li a { ... }

Are these just two ways of writing the same thing? Any help would be greatly appreciated!

This is a really good answer to the same question: http://stackoverflow.com/a/746557/1461021 — Black Bird, Nov 08 '12 at 17:31

Matt · Accepted Answer · 2012-11-08T22:02:49.553

3

The greater than symbol limits the lookup to just first-level descendants: children of the selector on the left. Without the symbol, it can be any descendent at any level.

So the first example, it's "random_ID with a child ul with a child li with a child a" and the second is "random_ID with any descendant ul with any descendent li with any descendent a"

edited Nov 08 '12 at 22:02

answered Nov 08 '12 at 17:30

Matt

10,434
1
36
45

Children are first-level descendants. There are no second-level children. – BoltClock Nov 08 '12 at 17:32
Right, I just used "first-level" to be descriptive about the difference. – Matt Nov 08 '12 at 17:33
@Matt Perhaps change that to first-level descendants? – Asad Saeeduddin Nov 08 '12 at 17:48

score 1 · Answer 2 · answered Nov 08 '12 at 17:32

1

> means "direct child". This will only style it if the element (one on the right of >) is a direct child of the parent (one on the left of >)

So say if I have the following layout:

<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

div > li { background: red; } Would not work, because li is not a direct child of it, whereas div > ul > li> or div li would work.

It should be noted that not every browser supports the direct child tag, specifically older versions of internet explorer, so don't rely on it, or have some fallback if you do use it.

answered Nov 08 '12 at 17:32

Andy

14,427
3
52
76

It's 2012. Unless you're in a stubborn enterprise, [you generally don't have to worry about browser support](http://stackoverflow.com/questions/10543780/how-reliable-is/10543791#10543791). – BoltClock Nov 08 '12 at 17:37
@BoltClock I appreciate that, I'm sure whoever uses that information can decide whether they need to support IE6 or not, so was merely mentioning it so they are aware. A significant amount of my work is for one customer who refuses to upgrade past IE6. – Andy Nov 08 '12 at 17:39

CSS3: Differences in child styling

2 Answers2