Question

I have divs inside li elements:

<ul id="tabs">   
    <li id="tab-1"> <div id="xxx"></div> </li>
    ....
</ul>

If in CSS I apply hover effect over li element

#tabs li:hover {....}

The effect is, as expected, applied on li and child div,

however if I make one space in between li and colon

#tabs li :hover {....}

effect applies only to child div

Is this normal? I’m a scripting beginner, and by reading different tutorials I got impression that white space does not make difference when script is executed. I tested this in Chrome, Safari and Firefox

Answer 1

#tabs li :hover {....} = #tabs li *:hover {....} (* = universal selector).

A space separates sub-selectors. This makes sense when you’re concatenating multiple selectors:

Say, you want to select a <div class="foo">, but not <a class="foo"> or <div>. The correct selector would be div.foo (element <div> with class foo).

If you add a space before the dot, you would be selecting a element with class foo, which is a child of <div>.

Back to your situation.

<div id="tabs">   #tabs                 #tabs
    <li>          li:hover              li
        <div>     div                   *:hover
                = #tabs li:hover div  = #tabs li *:hover