nth-child(), einschließlich illegaler Kinder (falsch formatiertes HTML)

Question

Ich arbeite mit HTML ähnlich (von einer Website Dritter kommend - so wird der Code geliefert, und ich habe keine Kontrolle darüber) :

<ul class"list"> 
    <li>first list item</li> 
    <li>second list item</li> 
    <div> 
     <li>third list item</li> 
     <li>fourth list item</li> 
    </div> 
    <li>fifth list item</li> 
    <li>sixth list item</li> 
</ul> 

Wie kann ich das fünfte Listenelement mithilfe von CSS auswählen? Mit Javascript, wenn ich document.querySelectorAll('ul li') im DOM verwende, bekomme ich eine iterable NodeList mit allen 6 der <li> Elemente.

Also dann let list_items = document.querySelectorAll('ul li') ermöglicht mir den fünften Listeneintrag mit list_items[4] zugreifen. Aber wenn ich versuche document.querySelectorAll('ul li:nth-child(5)') es funktioniert nicht, weil, anscheinend, sieht CSS nur 4 <li> Elemente (die direkten Kinder von <ul>).

Gibt es eine Möglichkeit, dies mit CSS zu tun, oder muss ich meinen Ansatz überarbeiten?

* Edit *

Ich brauche eine der li Elemente auswählen zu können, willkürlich, basierend auf Benutzereingaben. Das Vorhandensein und die Anzahl der li Elemente nach dem div Abschnitt variiert. Ich kann eines der li Elemente vor der div mit etwas wie ul > li:nth-of-type(${index_from_user_input}) - oder innerhalb der div mit etwas wie ul > div > li:nth-of-type(${index_from_user_input}) korrekt auswählen. Ich zähle anfänglich die Zahl von li s und benutzendas als die Grundlage für die Indexierung ... also, wenn Benutzereingaben anzeigen, dass ich den dritten liauswählen muss, zum Beispiel möchte ich in der Lage sein, etwas wie ul li:nth-of-type(3) zu verwenden .

Aber wenn index_from _user_input zeigt auf ein Element nach den div, dann ist es nicht korrekt funktionieren, da CSS nicht erkannt hat, die li s innerhalb der div, so dass die Indexzahlen sind aus meinen Wählern. Ich hatte auf eine sauberere Lösung gehofft, die nur ul li:nth-child() oder ul li:nth-of-type() verwendet, so dass ich nicht überprüfen müsste, wie viele li s innerhalb und nach der div sind. Ich vermute, dass es angesichts des schlechten Markups einfach nicht möglich ist, aber ich bin mir nicht 100% ig sicher, also dachte ich, ich würde hier fragen, für den Fall, dass jemand einen cleveren Weg dazu hat. Ansonsten kann ich den Code einfach überarbeiten und das Ganze anders angehen.

Answer 1

dies ist, wie der Code geliefert wird, und ich habe keine Kontrolle darüber

Oh, was Sie wirklich tun. Sie können das fehlerhafte div einfach mit Javascript aus der Liste entfernen.

Arbeitsbeispiel:

/* IDENTIFY ELEMENTS */ 
 
var list = document.getElementsByTagName('ul')[0]; 
 
var erroneousDiv = list.getElementsByTagName('div')[0]; 
 
var select = document.getElementsByTagName('select')[0]; 
 
var button = document.getElementsByTagName('button')[0]; 
 

 
/* IDENTIFY LIST ITEMS */ 
 
var allListItems = document.querySelectorAll('ul li'); 
 
var listItemsToMove = erroneousDiv.getElementsByTagName('li'); 
 
var numberOfListItemsToMove = listItemsToMove.length; 
 

 
/* REARRANGE LIST ITEMS AND REMOVE ERRONEOUS DIV */ 
 
for (var i = 0; i < numberOfListItemsToMove; i++) { 
 
    list.insertBefore(listItemsToMove[0], erroneousDiv); 
 
} 
 

 
list.removeChild(erroneousDiv); 
 

 

 
/* SELECTOR FUNCTION */ 
 
function selectListItem() { 
 
    for (var i = 0; i < allListItems.length; i++) { 
 
     allListItems[i].removeAttribute('style'); 
 
    } 
 

 
    var selected = select.value; 
 
    var listItem = document.querySelector('ul li:nth-of-type(' + selected + ')'); 
 
    listItem.style.color = 'blue'; 
 
    listItem.style.fontWeight = 'bold'; 
 
} 
 

 
button.addEventListener('click', selectListItem, false);

ul, form { 
 
display: inline-block; 
 
margin-right: 80px; 
 
vertical-align: middle; 
 
}

<ul class"list"> 
 
    <li>first list item</li> 
 
    <li>second list item</li> 
 
    <div> 
 
     <li>third list item</li> 
 
     <li>fourth list item</li> 
 
    </div> 
 
    <li>fifth list item</li> 
 
    <li>sixth list item</li> 
 
</ul> 
 

 
<form> 
 
<select> 
 
<option value="1">1</option> 
 
<option value="2">2</option> 
 
<option value="3">3</option> 
 
<option value="4">4</option> 
 
<option value="5">5</option> 
 
<option value="6">6</option> 
 
</select> 
 

 
</select> 
 
<button type="button">Select List Item</button> 
 
</form>