Thursday, October 15, 2015

immediate children selector in CSS

This is a newish selector not unlike the ~ sibling selector and the + next sibling selector as detailed here, only it uses a greater than sign instead of a tilde or a plus symbol. This has this example:

<div class='a'>
   <div>
      <div>...</div>
   </div>
</div>

 
 

...in which this...

.a > div { ... }

 
 

...would affect the divs immediately inside of the div with the a class slapped upon it but not the divs nested a level deeper inside of those divs. The "cascading" part of "cascading stylesheet" is effectively turned off and neutralized in this trick.

No comments:

Post a Comment