CODEWITHSUNDEEP
htmlcss
Ivan Kashtanov
Ivan Kashtanov

Reputation: 704

Changing style of elements in nested divs

Here's an HTML page with some styling.

<html>
<head>
    <style type="text/css">
        span {
            color: #FFF;
        }
        .light-gray span {
            background-color: #AAA;
        }
        .dark-gray span {
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="light-gray">
        <span>Text on light-gray background</span>
        <div class="dark-gray">
            <span>Text on dark-gray background</span>
            <div class="light-gray">
                <span>Text on light-gray background again</span>
            </div>
        </div>
        <div class="dark-gray">
            <span>More text on dark-gray background</span>
        </div>
    </div>
</body>
</html>

The goal is to create multi-level structure so that elements of each level use one of two color schemes, light gray and dark gray in the example above. First level is light gray, second is dark-gray, third is light-gray again, and so on. The problem is that 3rd level span which is supposed to be light gray is actually dark gray. How should I change CSS for this page to achieve my goal?

UPD: Elements in styled div may be in containers that don't change color scheme, like:

<div class="dark-gray">
    <div>
        <div>
            <span>Text on dark-gray background</span>
        </div>
    </div>
    <div class="light-gray">
        <div>
            <span>Text on light-gray background again</span>
        </div>
    </div>
</div>

Upvotes: 0

Views: 2536

Answers (5)

&#233;sasari
&#233;sasari

Reputation: 336

Why don't you assign styles to the span itself:

span.light-gray { background-color: #AAA; }
span.dark-gray { background-color: #666; }

And update HTML to:

<div>
    <span class="light-gray">Text on light-gray background</span>
    <div>
        <span class="dark-gray">Text on dark-gray background</span>
        <div>
            <span class="light-gray">Text on light-gray background again</span>
        </div>
    </div>
    <div>
        <span class="dark-gray">More text on dark-gray background</span>
    </div>
</div>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

You have add two more combination in your CSS.

    span {
        color: #FFF;
    }
    .light-gray span {
        background-color: #AAA;
    }
    .dark-gray span {
        background-color: #666;
    }
    .light-gray .dark-gray span {
        background-color: #666;
    }
    .dark-gray .light-gray span {
        background-color: #AAA;
    }

DEMO

Upvotes: 1

pradnyapalan
pradnyapalan

Reputation: 50

You need to use a CSS Combinators like + > ~

code:

  <style type="text/css">
    span {
        color: #FFF;
    }
    .light-gray >span {
        background-color: #AAA;
    }
    .dark-gray >span {
        background-color: #666;
    }
 </style>

depending on the relationship between the selector

Upvotes: 0

Ashish Mehta
Ashish Mehta

Reputation: 7426

second class is ovveride becoze u are wrong selection dom element using css see the below code for css

        .light-gray > span {
            background-color: #AAA;
        }
        .dark-gray > span {
            background-color: #666;
        }

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Added second class to override see the below example

<div class="light-gray dark-gray">
                <span>Text on light-gray background again</span>
            </div>

In css the priority goes to last added class so it class dark-gray override the class light-gray

Upvotes: 0

Related Questions