Odd and even do not work

0

I'm doing a theme in tumblr and wanted to change the color of the labels in the chat, so that in each line they alternated colors. It turns out that they all have the color set in odd

.label:nth-child(odd){color: #012E5E; font-style: italic;}
.label:nth-child(even){color: #D8A307; font-style: italic;}

This is the chat block

{block:Chat}
    {block:Lines}
        {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}<br/>
    {/block:Lines}
{/block:Chat}

And it stays that way

    
asked by anonymous 16.11.2018 / 16:06

1 answer

1

It does not work because each line is always odd in your case, because every label is the only child of a Lines

To adjust this you have to hit Lines, because they are sisters of each other. So your code should look like this:

.Lines:nth-child(odd) .label{color: #012E5E; font-style: italic;}
.Lines:nth-child(even) .label{color: #D8A307; font-style: italic;}

Snippet

.Lines:nth-child(odd) .label{color: #012E5E; font-style: italic;}
.Lines:nth-child(even) .label{color: #D8A307; font-style: italic;}
<div class="Chat">
    <div class="Lines">
        <div class="Label"><span class="label">{Label}</span>{/block:Label} {Line}<br/></div>
    </div>
    <div class="Lines">
        <div class="Label"><span class="label">{Label}</span>{/block:Label} {Line}<br/></div>
    </div>
    <div class="Lines">
        <div class="Label"><span class="label">{Label}</span>{/block:Label} {Line}<br/></div>
    </div>
    <div class="Lines">
        <div class="Label"><span class="label">{Label}</span>{/block:Label} {Line}<br/></div>
    </div>
</div>
    
16.11.2018 / 16:19