Question

For example my HTML is this

<ul>
    <li>Sample 1</li>
    <li>Sample 2
        <ul>
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3
                <ul>
                    <li>Grandsub 1</li>
                    <li>Grandsub 2</li>
                    <li>Grandsub 3
                        <ul>
                            <li>verySub 1</li>
                            <li>verySub 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Sample 3</li>
</ul>

I want to use different styles on every child <UL> without defining any class or id on them.

I dont know how many child <ul> might occur inside one another so inline css will not to the job

Is this possible?

Answer 1

All you need is to specify each level like so:

<style type="text/css">
ul li { color: red; }
ul li ul li { color: blue; }
ul li ul li ul li { color: black; }
ul li ul li ul li ul li { color: green; }
</style>

No inline style attributes, no classes required.

Works perfectly on the HTML snippet you provided. Keep in mind, that each successive level will inherit from the one before it. That’s the whole idea of the “cascading” part of CSS, but I’ve burned myself forgetting margins at a lower level and having things go haywire.