CSS: How to select a specific sibiling element

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.

You want to format the 1st child or child with text Iquitos Perú — Mohit Mutha, Apr 27 '18 at 04:40
Possible duplicate of https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — PM., Apr 27 '18 at 04:42
No. I need to get the position using only CSS, not the content of the position (I do not want the text) — Luis, Apr 27 '18 at 04:43

Fecosos · Accepted Answer · 2018-04-27T05:13:47.183

3

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

edited Apr 27 '18 at 05:13

answered Apr 27 '18 at 04:52

Fecosos

944
7
17

1

Glad to be helpful. – Fecosos Apr 27 '18 at 04:56

score 0 · Answer 2 · answered Apr 27 '18 at 04:57

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

Thank you for your answer, but I needed the position, I did not want the text as a reference to apply a format. The response of Fecosos is correct. Thank you anyway. — Luis, Apr 27 '18 at 04:59

score -1 · Answer 3 · answered Apr 27 '18 at 04:40

-1

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

answered Apr 27 '18 at 04:40

Web Dev

2,677
2
30
41

CSS: How to select a specific sibiling element

3 Answers3