How to apply different CSS style to child elements as they occur inside one another?


Tags: css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to make a webpage look like a popup? [closed]

    How to edit CSS style of a div using C# in .NET

    How to make margins collapse evenly?

    How to change css for span in span?

    float css only menu - how to modify on section2

    How to auto adjust wrapper height when padding is applied to inner elements

    Ionic on Codepen: how to start a new pen and get Ionic support

    How to fix internet explorer 9 overflow with form elements displayed in a list and “display:table”-based layout

    JavaScript: How to add 'word-wrap' style to element

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How to create a table inner bevel in HTML/CSS?

    How to render css code from php var without page refresh?

    How do I get my header to align with my navigation bar at the center of my page?

    How to fix a div to the same side when a mobile is on landscape

    How to implement Read more / Read less in pure CSS

    How to hide a soft hyphen (­) in HTML / CSS

    How to keep CSS from render-blocking my website?

    Using CSS to style a Sencha Touch form - how do I find the elements?

    CSS Border Color: How to set bottom border color?

    How to remove default CSS from TextField in flex?

    How to convert a rectangle to TRBL CSS rect value?

    How to left-align and right-align elements in one row using flexbox?

    How to achieve Expand collapse Side Nav with icon using jquery and boostrap css

    How to make a CSS horizontal navigation menu?

    Example of how to load static CSS files from node_modules using webpack?

    How to make vertical text change into horizontal text in css?

    Javascript how to use external Css sheet

    How can I determine the escape sequence for characters in an icon font?

    How do I implement a MailChimp API form embed?