Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Classifying the ul tag

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading