CSS problem with selectors

Question

All I want DIVs from red to pink to be colored red and DIVs from pink to red to be colored pink. But this does not work (all is red):

<!DOCTYPE HTML>
<html>
<head>
<style>
div {
    display: inline-block;
    padding: 50px;
    background: yellow;
    border: solid 1px black;
}

.pink div {
    background: pink;
}

.red div {
    background: red;
}
</style>
</head>
<body>

<div class="red">
    <div>
        <div>
            <div>
                <div>
                    <div class="pink">
                        <div>
                            <div>
                                <div class="red">
                                    <div>
                                        <div>
                                            <div>
                                                <div class="pink">
                                                    <div>
                                                        <div>
                                                            <div>
                                                                <div>
                                                                    <!-- and so on -->
                                                                </div>
                                                            </div>                                      
                                                        </div>
                                                    </div>                                              
                                                </div>
                                            </div>                                      
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

I know why it doesn't work but now I am looking for a solution. Please suggest anything as long as:

it is in pure CSS;
it doesn't require defining IDs;
it can work for any numbers of DIVs;
the class names (red and pink) can be defined for any of the DIVs.

Alex Wayne · Accepted Answer · 2011-08-31 16:58:19Z

4

EDITED

background: inherit is your friend. Since background usually does not inherit.

div {
    display: inline-block;
    padding: 10px;
    background: yellow;
    border: solid 1px black;
}

div div {
    background: inherit;
}

.red {
    background: red;
}

.pink {
    background: pink;
}

http://jsfiddle.net/pU6Ds/2

Now slide these off to the side to prove each one has an opaque background:

http://jsfiddle.net/pU6Ds/1/

edited Aug 31, 2011 at 16:58

answered Aug 31, 2011 at 16:52

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Thomas · Accepted Answer · 2011-08-31 16:53:30Z

2

You can use the following, of which the most important part is the default background-color: transparent; for the regular divs, which allows the background-color, where specified on the .pink and .red divs, to show through:

div {
    display: block;
    min-height: 2em;
    margin: 0 auto;
    padding: 0.2em 0;
    border: 1px solid #000;
    background-color: transparent;
}
.red {
    background-color: red;
}
.pink {
    background-color: pink;
}

JS Fiddle demo.

answered Aug 31, 2011 at 16:53

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Collectives™ on Stack Overflow

CSS problem with selectors

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related