Style div as zebra

Question

I'm having problems trying to style div tags on my code, you can check in the following jsfiddle what I have.

CSS

.container {
  width: 200px;
  margin: 0 auto;
}

.item {
  line-height: 25pt;
  border: solid 1px black;
}

.container div:nth-of-type(odd) {
  background: red;
}

.container div:nth-child(odd) {
  background: blue;
}

HTML

<ul class="cb-list">
  <div class="container">
    <li>
      <div class="item">
        <div class="detail">
          First Record
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="detail">
          Second Record
        </div>
      </div>
    </li>
  </div>
</ul>

I'm using a tool that is generating the code automatically, so I'm not able to change this code. I have tried with using nth-of-type and nth-child both with odd and even but no luck yet. Any help would be appreciated. Thanks.

Problem #1 is that the HTML you're dealing with is invalid. A `
` cannot be a child of a `
`. Only a `
` can — j08691, May 25 '18 at 02:41
How can I accomplish alternate backgrounds for divs in this case? Would it be possible then to color li tags instead of divs? — Carlos M, May 25 '18 at 02:46

Kamalesh M. Talaviya · Answer 1 · 2018-05-25T02:55:22.247

2

if i understood you properly, you are trying to pick first div inside each odd list item and each even list item

.container {
  width: 200px;
  margin: 0 auto;
}

.item {
  line-height: 25pt;
  border: solid 1px black;
}

.container li:nth-of-type(odd) div {
  background: red;
}

.container li:nth-child(even) div{
  background: blue;
}

<ul class="cb-list">
  <div class="container">
    <li>
      <div class="item">
        <div class="detail">
          First Record
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="detail">
          Second Record
        </div>
      </div>
    </li>
  </div>
</ul>

I'm using a tool that is generating the code automatically, so I'm not able to change this code

but div inside ul is invalid see here

edited May 25 '18 at 02:55

answered May 25 '18 at 02:47

Kamalesh M. Talaviya

1,422
1
12
26

Yeah, but OP said the code can't be changed, so ya gotta take it or leave it. +1 for a workable solution. – ecg8 May 25 '18 at 02:55
Yes, I can't change the html since the tool is generating automatically I just can change the css to deal with the requirement... Maybe a bug? Could be... The solution seems OK... +1 – Carlos M May 25 '18 at 03:01

MT-FreeHK · Accepted Answer · 2018-05-25T03:13:55.387

2

Updated for not changing the html.

The class you want to alter is inside the li, not the div, you miss 1 level in your code.

.container {
  width: 200px;
  margin: 0 auto;
}

.item {
  line-height: 25pt;
  border: solid 1px black;
}

.container li:nth-of-type(odd) {
  background: red;
}

.container li:nth-child(odd) {
  background: blue;
}

<ul class="cb-list">
  <div class="container">
    <li>
      <div class="item">
        <div class="detail">
          First Record
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="detail">
          Second Record
        </div>
      </div>
    </li>
  </div>
</ul>

edited May 25 '18 at 03:13

answered May 25 '18 at 02:48

MT-FreeHK

2,462
1
13
29

According to the OP "I'm not able to change this code" – j08691 May 25 '18 at 02:52
@j08691 , you are right, updated for just changing css only – MT-FreeHK May 25 '18 at 03:08

Style div as zebra

2 Answers2