CSS: How to select a specific sibiling element - css

Question

I need to know how I can select the <li>Iquitos Peru</li> tag using CSS, I have read about "nth-child" but I do not understand it. I have the following sample code.
<ul id="pais">
<h1>Perú</h1>
<li class="departamento">
<ul>
<h2>Lima</h2>
<li class="provincia">
<h3>Lima</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li>Ancon</li>
<li>Comas</li>
<li>Los Olivos</li>
<li>La Molina</li>
<li>Chorrillos</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
<li class="departamento">
<ul>
<h2>Loreto</h2>
<li class="provincia">
<h3>Iquitos Ciudad</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li>Iquitos Perú</li> <-- I need format this ######
<li>Nauta</li>
<li>Belén</li>
<li>Punchana</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="button" value="Enviar" class="btnEnviar" (click)="alert()">
I found this example but I do not know how I can apply it to my case. Is that in this example only divs are used, and I have <ul> I find this but is difficult to understand. Thank you very much.

Answer 1

One way is selecting it like this if you know that the order is not going to change
#pais .departamento:last-child .provincia li:nth-child(2) {
color: red;
}
or using both times the nth-child selector
#pais .departamento:nth-child(3) .provincia li:nth-child(2) {
color: red;
}

Answer 2

Not possible to select the content with CSS. So added a value attribute to the li for selector.
Alternatively if you are using jquery then you can use the contains selector
li[value='Iquitos Per'] {
background-color:red
}
<ul id="pais">
<h1>Perú</h1>
<li class="departamento">
<ul>
<h2>Lima</h2>
<li class="provincia">
<h3>Lima</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li>Ancon</li>
<li>Comas</li>
<li>Los Olivos</li>
<li>La Molina</li>
<li>Chorrillos</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
<li class="departamento">
<ul>
<h2>Loreto</h2>
<li class="provincia">
<h3>Iquitos Ciudad</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li value="Iquitos Per">Iquitos Perú</li>
<li>Nauta</li>
<li>Belén</li>
<li>Punchana</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="button" value="Enviar" class="btnEnviar" (click)="alert()">

Answer 3

You can either give that <li> an id or a class. Otherwise you can use a selector, see: Nested classes selectors