CODEWITHSUNDEEP
csshtmlcss-selectors
Haradzieniec
Haradzieniec

Reputation: 9340

color text in divs with two colors using css only - tricky

OK, let me rewrite my question in another words so it looks clear and interesting: jsFiddle

I need a pure css solution that colorizes the lines of text in the color depending whether the line is odd or even.

The example of code could be :

<div class="main">
    <div class="zipcode12345">
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
    </div>
    <div class="zipcode23456">
        <div class="myclass">blue with css</div>
    </div>
    <div class="zipcode90033">
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
    </div>
    <div class="zipcode11321">
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
    </div>
</div>

Is it possible to make it with css? As you see @ jsFiddle, it is not colorized as expected.

So, the main div is "main". The inner divs always have class names in format "zipcodeXXXXX", as you see. The number of zipcodeXXXXX is variable, the number of myclass is variable. However, the odd lines should be always red and the even lines should be always blue. Does pure css solution exist?

That would be kind of 

.myclass:nth-child(2n+1){
 color:red;
}
.myclass:nth-child(2n){
 color:blue;
}

if we could igonre "zipcodeXXXXX" divs, right?

Thank you.

Upvotes: 1

Views: 184

Answers (4)

Jyotsna Pradhan
Jyotsna Pradhan

Reputation: 11

.zipcode12345:nth-child(odd) { background-color: red; }
.zipcode12345:nth-child(even) { background-color: blue; }

.zipcode23456:nth-child(odd){ background-color: blue; }

.zipcode90033:nth-child(odd){ background-color: red; }
.zipcode90033:nth-child(even){ background-color: blue; }

.zipcode11321:nth-child(odd){ background-color: blue; }
.zipcode11321:nth-child(even){ background-color: red; }

Upvotes: 1

Haradzieniec
Haradzieniec

Reputation: 9340

OK, just for people who wants to find a solution.

This is NOT a solution (guess why? - the same thing as with css solution above):

jQuery(".main .myclass:nth-child(odd)").css('color', 'blue');

And this is a solution:

jQuery(".main .myclass:odd").css('color', 'blue');

The difference explained here by Frédéric Hamidi.

Upvotes: 0

Marco
Marco

Reputation: 1349

Have you tried something like this:

.myclass:nth-of-type(odd) {
    color: red;
}

.myclass:nth-of-type(even) {
    color: blue;
}

I've just used the code that @James Donnelly provided.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128781

Simply apply different odd/even rules to the parent elements as well as the child elements:

div[class^="zipcode"]:nth-of-type(odd) .myclass:nth-of-type(odd),
div[class^="zipcode"]:nth-of-type(even) .myclass:nth-of-type(even) {
    color: red;
}

div[class^="zipcode"]:nth-of-type(odd) .myclass:nth-of-type(even),
div[class^="zipcode"]:nth-of-type(even) .myclass:nth-of-type(odd) {
    color: blue;
}

JSFiddle demo.

Upvotes: 5

Related Questions