CSS Selectors Explanation - html

Question

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>```

Answer 1

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;}

Answer 2

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.