CSS Selectors Explanation-CodePudding

I'm really confused as to how I can style this list WITHOUT changing the following HTML or wrapping it in class names. How do I go about this?

For example, if I want to put Ocean Fish in bold but NOT have Pacific or Atlantic affected, how do I target that div without adding a class name?

Another example, I want to have "12 salmon" and "3 cod" in green text, and "46 halibut" and "13 pollock" in blue text? in I know there's a trick using very specific selectors, but I don't know how.

 <ul>
   <li>
     <div>Ocean Fish</div>
     <ul>
       <li>
         <div>Pacific</div>
         <ul>
           <li>12 salmon</li>
           <li>3 cod</li>
         </ul>
       </li>
     </ul>
     <ul>
       <li>
         <div>Atlantic</div>
         <ul>
           <li>46 halibut</li>
           <li>13 pollock</li>
         </ul>
       </li>
     </ul>
   </li>
 </ul>```

CodePudding user response：

This will handle all your cases if you want to do it without classes.

body > ul > li > div{font-weight:bold;}
body > ul > li > ul:nth-child(2) > li > ul{color:green;}
body > ul > li > ul:nth-child(3) > li > ul{color:blue;}

CodePudding user response：

Similar method to previous answer, but more direct:

 let divSel = document.querySelectorAll('div');  // alert(divSel.length);
 divSel[0].style.fontWeight = 'bolder';

 let liSel = document.querySelectorAll('li');
 liSel[2].style.color = 'green';
 liSel[3].style.color = 'green';
 liSel[5].style.color = 'blue';
 liSel[6].style.color = 'blue';

Still a pain to modify if entry order is changed.