nth-child(), including illegal children (malformed HTML) - html

Question

I'm working with HTML similar to this (coming from a third party web site - this is how the code is served, and I have no control over it):
<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>
How can I select the fifth list item using CSS? With Javascript, if I use document.querySelectorAll('ul li') in the DOM, I get an iterable NodeList with all 6 of the <li> elements.
So then let list_items = document.querySelectorAll('ul li') allows me to access the fifth list item using list_items[4]. But if I try document.querySelectorAll('ul li:nth-child(5)') it doesn't work because, apparently, CSS only sees 4 <li> elements (the direct children of <ul>).
Is there a way to do this with CSS, or do I need to rework my approach?
* Edit *
I need to be able to select any of the li elements, arbitrarily, based on user input. The presence and number of li elements after the div section varies. I can correctly select any of the li elements before the div using something like ul > li:nth-of-type(${index_from_user_input}) - or within the div using something like ul > div > li:nth-of-type(${index_from_user_input}). I'm initially counting the number of lis and using that as the basis for the indexing...so if user input indicates that I need to select the third li, for example, I want to be able to simply use something like ul li:nth-of-type(3).
But if index_from _user_input points to an element after the div, then it doesn't work correctly, since CSS doesn't recognized the lis within the div, so the index numbers are off in my selector. I was hoping for a cleaner solution that uses only ul li:nth-child() or ul li:nth-of-type() so that I wouldn't have to check how many lis are within and after the div. I suspect it's just not possible, given the bad markup, but I'm not 100% sure of that, so I figured I'd ask here, in case somebody might have a clever way to do it. Otherwise, I can just rework the code and approach the whole thing differently.

Answer 1

this is how the code is served, and I have no control over it
Oh, you really do. You can just remove the erroneous div from the list with javascript.
Working Example:
/* 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>