Clever Geek Handbook

CSS selector markup: element element vs element> element

What is the difference between the following two CSS selectors?

From the explanation here , do they sound the same?

div p{}

Selects all p elements inside div elements

div > p{}

Selects all elements p

where the parent is div

.

+3


source to share


3 answers


The difference is depth. What the w3schools site doesn't explain well is that it E>F

only matches the closest children E

, but E F

matches the descendants of any depth.

Using your CSS example, consider the following HTML snippet:



<div>
    <p id="paragraph1">I'm paragraph 1</p>
    <ul>
        <li><p id="paragraph2">I'm paragraph 2</p></li>
    </ul>
</div>

The first set of rules div p

will match both blocks p

. The second,, div > p

will only match paragraph1

.

+13


source 


div p{}

This applies to everyone p

insidediv 



div>p{}

This says p

to be a direct descendant of a div

+3


source 


/*This one applies to all childrens (`span`) inside parent*/
div span {
    color: red;
}

/*This one says child (`span`) needs to be a direct descendent of parent*/
div > span {
    color: green;
}
      

        
        
        
      

    
<div>
  <!--(`div`) does not represent an obstacle in both selectors-->
  <div>
    <span>I live in Duckburg.</span>
  </div>
  <ul>
    <li>
      <span>I live in Duckburg.</span>
    </li>
  </ul>
  <span>I live in Duckburg.</span><br>
  <span>I live in Duckburg.</span>
</div>
Run codeHide result


+1


source






More articles:


All Articles