Odd and Even don’t work

Asked

Viewed 44 times

0

I’m doing a Heme on tumblr and wanted to change the color of the chat boxes, so that in each line they alternate colors. Turns out they all get the color set on 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

print da label

css

1 answer

1

It doesn’t work because every line is always odd in your case, for each label is the only daughter of a Lines

To adjust this you have to reach Lines, because they are sisters to 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>

  • So, the problem is that the lines are not inside a div, so to manipulate in this way would not bring any kind of effect.

  • 2

    @got it... if your framework works differently you can inspect the already rendered code in the Browser, using the browser Devtools to see wanted elements it generates, if they are <labels> or <ul><li> or <dt><dd> and adapt your CSS, but your problem is that you have to use Odd and Even the level above, in the brother elemenetos and not in the brother’s children as I explained in the answer. I even reissued the code, take a look again to see if it solves

  • I did a test here, except for the <br/> that I put after {Line} and it worked, now I’m just going to rearrange the lines inside div so that they stay under each other. Thanks for your help!

  • 1

    @moon good that solve, if you think the problem has been solved consider mark the Answer as Accepted ✓. Be the problem with the <br> be broken your CSS rule gives a look at this answer that will surely help you understand what actually happened not to have worked: https://answall.com/questions/290866/qual-a-diff%C3%A7a-entre-o-Nth-Child-e-o-Nth-of-type

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.