My css first-child pseudo-selector is working in reverse manner

Question

The syntax of selecting first child in <ul> list is:

li: first-child{color:blue;}

but it is not working. Instead when I write it in reverse manner like:

ul: first-child{color:blue;}

then it is working properly. Is it right or not?

Answer 1

You should set :first-child with li without space.

li:first-child{color:blue;}

The other way is also right because you are setting the first child of the elements inside of ul. ul follow with space means selects all elements inside <ul> elements

ul :first-child{color:blue;}

You may refer to w3schools tutorial for details.

/* Both setting the same li to blue */
li:first-child{color:blue;}
ul :first-child{color:blue;}

<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>