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?

>Solution :

.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.