CSS target top level p tags in an unordered list

Question

I have a nested unordered list and I'm trying to only tag a certain p tag.

<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>

Basically I'm trying to only apply styling to the first p tag with class of content and none of the nested p tags with content. I signified the area with "Here".

I've tried in my styling to do .category-0>.depth-0>.submenu>p:last-child. I've tried variations of .content:first-of-type all to no avail. So how do I select the first instance under the top level class of an unordered list?

Also of note...the unordered list is being generated over a Ruby iteration so inline styling...not possible.

Answer 1

.depth-0 > .submenu > .content should do the trick.

Your :last-child selector should work as well, provided p.content will always be the :last-child of a .submenu parent.

Answer 2

As far as I know, the :first-child selector only applies on a sibling level. So you would need to use the pseudo-class on the unordered list element:

 .category-0:first-child p.content { color: green; }

 <ul class="category-0"> <li class="depth-0"> <div class="flex submenu"> <p></p> <p class="content">Here</p> </div> <ul class="category-1"> <li class="depth-1"> <div class="flex submenu"> <p></p> <p class="content"></p> </div> </li> </ul> </li> </ul> <ul class="category-0"> <li class="depth-0"> <div class="flex submenu"> <p></p> <p class="content">Here</p> </div> <ul class="category-1"> <li class="depth-1"> <div class="flex submenu"> <p></p> <p class="content"></p> </div> </li> </ul> </li> </ul> <ul class="category-0"> <li class="depth-0"> <div class="flex submenu"> <p></p> <p class="content">Here</p> </div> <ul class="category-1"> <li class="depth-1"> <div class="flex submenu"> <p></p> <p class="content"></p> </div> </li> </ul> </li> </ul>