Classifying the ul tag [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
I want to use such a structure in my WordPress site:
HTML:
<div class="main_txt">
<ul>
<li>
<h2>text 1</h2>
</li>
<li>
<h2>text 2</h2>
</li>
<li>
<h2>text 3</h2>
</li>
<li>
<h2>text 4</h2>
</li>
</ul>
</div>
Call and style the ul li tags as follows:
.main_txt ul li h2{
color: #c00579;
}
.main_txt ul li > li h2{
color: #ff0000;
}
.main_txt ul li > li > li h2{
color: #1eff00;
}
.main_txt ul li > li > li > li h2{
color: #1900ff;
}
But only the first style is executed and the other styles have no effect.
Is there a way to style ul li tags without giving a class?

Answer 1

.main_txt ul li h2 {} selects all the h2 elements in all the li's.
.main_txt ul li > li h2{ selects all the h2 elements in all the li's in all the li's.
.main_txt ul li > li > li h2{ selects all the h2 elements in all the li's in all the li's in all the li's.
And so on. You aren't really selecting the first, second, or third h2. If that's what you need to do, you can use :nth_child. For example:
.main_txt ul li:nth-child(2) h2{ selects the h2 in the second li.