CSS: как выбрать определенный элемент сиблинга

Question

Мне нужно знать, как я могу выбрать тег <li>Iquitos Peru</li> с помощью CSS, я читал о "nth-child", но я не понимаю его. У меня есть следующий пример кода.

<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()">

Я нашел этот пример, но я не знаю, как применить его к своему делу. Разве в этом примере используются только div, и у меня есть <ul> I найти это , но это трудно понять. Большое спасибо.

Answer 1

Один из способов выбрать это, если вы знаете, что заказ не изменится

#pais .departamento:last-child .provincia li:nth-child(2) {
  color: red;
}

или используя оба раза селектор n-го ребенка

#pais .departamento:nth-child(3) .provincia li:nth-child(2) {
  color: red;
}

Answer 2

Невозможно выбрать контент с помощью CSS. Поэтому в li добавлен атрибут value для селектора.

В качестве альтернативы, если вы используете jquery, вы можете использовать contains селектор

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

Вы можете присвоить этому <li> идентификатор или класс. В противном случае вы можете использовать селектор, см .: Вложенные селекторы классов