Question

I'm dissecting Wordpress's default theme TwentyThirteen in attempts to learn HTML&CSS and more importantly, what I believe to be, industry standards for HTML&CSS.

I ran into a part in the CSS that I believe to be redundant but I would like to some insight on (probably) why the Wordpress team used these 2 CSS selectors together.

ul.nav-menu,
div.nav-menu > ul {
Was it helpful?

Solution

First Selector

ul.nav-menu

This first selector relates only to ul elements with a class named nav-menu. For example:

<ul class="nav-menu">
   <li></li>
   <li></li>
</ul>

Here it relates to the ul element because it is simply a ul with a class of nav-menu.

Second Selector

div.nav-menu > ul

This second selector relates only to ul elements that are direct children (directly below) div elements with a class named nav-menu. For example:

<div class="nav-menu">
   <ul>
      <li></li>
      <li></li>
   </ul>    
</div>

Here it relates to the ul within the div because it is a ul directly below the div with a class of nav-menu.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top