Cascading Style Sheets { Internet Explorer : Beispiel "Multple Classes" }

Internet Explorer, Beispiel "Multiple Classes"

Container 1 enthält fünf Absätze. Bei korrekter Darstellung dürfen nur der vierte und der fünfte Absatz einen hellroten Hintergrund haben. Ein blauer oder roter Hintergrund im zweiten oder dritten Absatz ist falsch.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eu magna nec leo porta imperdiet. Nullam accumsan ipsum non ipsum. Nunc nulla purus, tincidunt ut, rhoncus vitae, ornare ut, lacus. Mauris elementum eros quis tellus.

Container 2 enthält ebenfalls fünf Absätze. Hier dürfen bei korrekter Darstellung nur der vierte und der fünfte Absatz einen hellblauen Hintergrund haben. Ein blauer oder roter Hintergrund im zweiten oder dritten Absatz ist falsch.

Das Style-Sheet sieht so aus:

div.container-1, div.container-2 {
    background-color: #fefeff;
    padding: 0;
    border: 2px solid navy;
    margin: 0.2em 0;
    }
div.container-1 p, div.container-2 p {
    padding: 0.2em;
    border-width: 1em;
    border-style: solid;
    margin: 1em 3em;
    }
div.container-1 p.test-eins {
    border-top-color: #fc0;
    }
div.container-1 p.test-zwei {
    border-bottom-color: #cf0;
    }
div.container-1 p.test-eins.test-zwei {
    background-color: #0cf;
    }
div.container-1 p.test-zwei.test-eins {
    background-color: #f9c;
    }
div.container-2 p.test-eins {
    border-top-color: #fc0;
    }
div.container-2 p.test-zwei {
    border-bottom-color: #cf0;
    }
div.container-2 p.test-zwei.test-eins {
    background-color: #f9c;
    }
div.container-2 p.test-eins.test-zwei {
    background-color: #0cf;
    }

Das HTML für die Container sieht so aus:

<div class="container-1">
<p>Lorem ....</p>
<p class="test-eins">Lorem ....</p>
<p class="test-zwei">Lorem ....</p>
<p class="test-eins test-zwei">Lorem ....</p>
<p class="test-zwei test-eins">Lorem ....</p>
</div>
<div class="container-2">
<p>Lorem ....</p>
<p class="test-eins">Lorem ....</p>
<p class="test-zwei">Lorem ....</p>
<p class="test-eins test-zwei">Lorem ....</p>
<p class="test-zwei test-eins">Lorem ....</p>
</div>