Question

Can anyone explain why is this not working? on div>ol:first-child ?

div>ul:first-child
{
    background:yellow;
}

The style on top works.. for ul. hi-lighting it. If I change >ul to >ol.. nothing happens

<div>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</div>

http://jsfiddle.net/mFMuq/

Answer 1

From w3schools.com first-child selector:

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

The ol isn’t the first child of it’s parent, it doesn’t actually matter that it’s the first ol of it’s parent. If you swap the ol and ul around then the ol works but the ul doesn’t.

If you want to target the first ol then use the :first-of-type selector. JSFiddle