Selecting 2nd li of second occurrence of a class - css

Question

I have
<ul class="biglist">
on many places of a page... in which i want to select only the second
<ul class="biglist">
and in that again select second li and add color to it...
i currently have it like follows
.biglist li:nth-child(2) {
color:#ff0000;
}
which i try to add...
.biglist:nth-child(2) li:nth-child(2)
it does not selects the second list's second item. Tried in internet search and could not able to get suitable solution. can someone help pls ?
Here is my complete code...
<div class="vc_col-sm-4 wpb_column column_container ">
<div class="wpb_wrapper">
<div class="dt-fancy-separator title-left accent-border-color" style="width: 100%;">
<div class="dt-fancy-title bg-on" style="color: #ffffff;">
<span class="separator-holder separator-left"></span>List of Places:
<span class="separator-holder separator-right"></span>
</div>
</div>
<div class="gap" style="line-height: 10px; height: 10px;"></div>
<section class="shortcode-teaser frame-fancy frame-on rotateInDownLeft animate-element">
<div class="shortcode-teaser-content text-big">
<ul class="biglist">
<li><p>New York</p></li>
<li><p>Ontario</p></li>
<li><p>London</p></li>
</ul>
</div>
</section>
<div class="gap" style="line-height: 30px; height: 30px;"></div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container ">
<div class="wpb_wrapper">
<div class="dt-fancy-separator title-left accent-border-color" style="width: 100%;">
<div class="dt-fancy-title bg-on" style="color: #ffffff;">
<span class="separator-holder separator-left"></span>List of Old Places:
<span class="separator-holder separator-right"></span>
</div>
</div>
<div class="gap" style="line-height: 10px; height: 10px;"></div>
<section class="shortcode-teaser frame-fancy frame-on rotateInDownLeft animate-element">
<div class="shortcode-teaser-content text-big">
<ul class="biglist">
<li><p>Mumbai</p></li>
<li><p>Tokyo</p></li>
<li><p>Bali</p></li>
</ul>
</div>
</section>
<div class="gap" style="line-height: 30px; height: 30px;"></div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container ">
<div class="wpb_wrapper">
<div class="dt-fancy-separator title-left accent-border-color" style="width: 100%;">
<div class="dt-fancy-title bg-on" style="color: #ffffff;">
<span class="separator-holder separator-left"></span>List of New Ones:
<span class="separator-holder separator-right"></span>
</div>
</div>
<div class="gap" style="line-height: 10px; height: 10px;"></div>
<section class="shortcode-teaser frame-fancy frame-on rotateInDownLeft animate-element">
<div class="shortcode-teaser-content text-big">
<ul class="biglist">
<li><p>Paris</p></li>
<li><p>Cairo</p></li>
<li><p>Delhi</p></li>
</ul>
</div>
</section>
<div class="gap" style="line-height: 30px; height: 30px;"></div>
</div>
</div>

Answer 1

My understanding is this is not possible in CSS using nth-child or nth-of-type.
The class check is done after the nth element check, so if there are other ul elements between those of class biglist, you have no guarantee of selecting the ul you are looking for.
You need a JavaScript based solution.
For example, using Jquery:
uls = $("ul");
var bigListCount = 0;
for(i = 0; i < uls.length; i++)
{
if($(uls[i]).hasClass("biglist")) bigListCount++;
if(bigListCount == 2){
$(uls[i]).css("color", "#ff0000");
}
}

Answer 2

You can try using :nth-of-type(N):
ul.biglist li:nth-of-type(2) { background-color: #ff0000; }

Answer 3

nth-of-type checks the occurrence of an item in its direct parent. In the case of your HTML, inside a div there is only one ul. So what you have to do is first select one of the top level elements (the column_container) and then set its ul's second li to red. Here you can see a working codepen example using your HTML.
https://codepen.io/tskjetne/pen/gWLKKr
For clarification, what I do is set the 2nd column_container's ul's 2nd li to color red.

Answer 4

Given the knowledge now that you have elements in between the ULs, css only will not work. Here's a jQuery solution:
if (($uls = $("ul.biglist")).length > 1){
$uls[1].find("li:nth-child(2)").css({ color: "#ff0000" })
}