Why div # foo hr: first child not working

Question

It seems to me that this should work if you can tell #foo p: first-child why #foo hr: first-child does not work. If anyone can explain this, I would really appreciate it.

I installed a JSFiddle demo here - http://jsfiddle.net/mGu7x/6/

Answer 1

None of the <hr> elements are the first parent of their parent element.

Watch this updated demo that makes the border more obvious and moves hr up.

You might want to look :first-of-type , which is new in CSS 3 and does what you are looking for. (Can I use offers so that it has broad support outside of non current IE).

See the demo with :first-of-type (which I tested only in Chrome).

Answer 2

Because #main first-child is p , not hr .

You can use nth-child , though:

 #main hr:nth-child(2) { border-bottom: 3px solid green; }