Explain how can we cross any individual li using only a parent class?

advertisements

I want to traverse all individual li by using only one parent class eg: "here we using mainDiv" How can we do this in css3? not in Jquery or javascript.

css:
    .mainDiv ul li:nth-child(1){
       color:red;
    }
   .mainDiv ul li:nth-child(2){
           color:blue;
        }
   .mainDiv ul li:nth-child(3){
           color:yellow;
        }

kindly mention below code

Like wise i want to traverse the second set of ul > li (a,b,c) by using only one parent class name (mainDiv). How can i do this by css3?

HTML:

 <div class="mainDiv">

    <ul>
    <li>x</li>
    <li>y</li>
    <li>z</li>
</ul>

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

</div>


If I understand your question this HTML code could be helpful.

<head>
    <style>
        /* all list items will be blue */
        .my-class li {
            color: blue;
        }

        /* only second list will be bold */
        .my-class ul:nth-child(2) li {
            font-weight: bold;
        }

        /* all third list items will be underline */
        .my-class ul li:nth-child(3) {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="my-class">
        <ul>
            <li>x</li>
            <li>y</li>
            <li>z</li>
        </ul>

        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>
</body>