How to apply CSS on alternate elements with certain data-value?

Question

I am typing to apply css on alternate elements which have [data-row="row"]

Something like:

[data-row="row"]:nth-of-type(odd) {
  background-color: #B7CEEC;
}

<div class="pricingdiv" style="width:100%;min-height: 100px;background-color:white;">
  <ol class="pricingList">
    <li class="LotLi">
      <div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title^lotstextarea~&quot;asdad&quot;^file_uploadlot~LotFile472cb2d^lottype~value^txtbiddecrement~123^txtfrontbuffer~^txtbackbuffer~">Lot Title-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span>  <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
      </div>
      <ol class="lotchildlist">
        <li class="LineitemLi" title="Left Click to see more.">
          <div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="3" data-quantity="2332" data-extendedprice="2" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span>  <span clas="quantity" style="padding-left:130px">2332</span> 
            <span
            class="extendedprice" style="padding-left:130px">'2'</span> <span class="saving" style="padding-left:130px">'23'</span>  <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
              <div class="lineitemdescription" data-row="row">'ads'</div>
          </div>
        </li>
        <li class="LineitemLi" title="Left Click to see more.">
          <div class="addedlineitem" data-row="row" data-ceilingprice="342" data-historicprice="2323" data-reserveprice="432" data-quantity="33" data-extendedprice="434" data-saving="">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">342</span>  <span class="quantity" style="padding-left:130px">33</span> 
            <span
            class="extendedprice" style="padding-left:130px">'434'</span> <span class="saving" style="padding-left:130px">''</span>  <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
              <div class="lineitemdescription" data-row="row">'asdad'</div>
          </div>
        </li>
      </ol>
    </li>
    <li class="LotLi">
      <div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title2^lotstextarea~&quot;asdad&quot;^file_uploadlot~LotFile6b238d6^lottype~value^txtbiddecrement~23^txtfrontbuffer~^txtbackbuffer~">Lot Title2-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span>  <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
      </div>
      <ol class="lotchildlist">
        <li class="LineitemLi" title="Left Click to see more.">
          <div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="23" data-quantity="232" data-extendedprice="23" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span>  <span class="quantity" style="padding-left:130px">232</span> 
            <span
            class="extendedprice" style="padding-left:130px">'23'</span> <span class="saving" style="padding-left:130px">'23'</span>  <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
              <div class="lineitemdescription" data-row="row">'asd'</div>
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>

I would prefer pure CSS solution to this. Thanks.

Is that odd in relation to the <li>, or odd in relation to the entire DOM? — CodingIntrigue
– CodingIntrigue, Commented Aug 14, 2015 at 6:30
@RGraham I have hardcoded the colors jsfiddle.net/uqs9znog so that you can get a better understanding of my question — SamuraiJack
– SamuraiJack, Commented Aug 14, 2015 at 7:24
I suspect this is not possible with CSS unless all the data-row divs share a parent. — Paulie_D
– Paulie_D, Commented Aug 14, 2015 at 8:51

venkat7668 · Accepted Answer · 2015-08-14 07:42:56Z

1

DEMO IS HERE

.pricingList > li:nth-of-type(odd)>div[data-row="row"] {
  background-color: red;
}
.pricingList > li:nth-of-type(even)>div[data-row="row"]{
    background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(odd) [data-row="row"]{
    background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(even) [data-row="row"]{
    background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(odd) [data-row="row"]{
    background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(even) [data-row="row"]{
    background-color: blue;
}

edited Aug 14, 2015 at 7:42

answered Aug 14, 2015 at 6:27

venkat7668

2,7971 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CodingIntrigue Over a year ago

That demo highlights even rows. And is also not representative of the problem because all your rows are siblings

CodingIntrigue Over a year ago

So now I have to ask. What's different between this and the asker's original CSS: [data-row="row"]:nth-of-type(odd)?

SamuraiJack Over a year ago

This doesnt work. My scenario is different. The divs might not necessarily be siblings. There can be parent child relationship. Can you make it work in my snippet?

SamuraiJack Over a year ago

@venkat7668 I have hard coded the colors so that you can get a better insight jsfiddle.net/uqs9znog This is what I am looking for

Ronald Swets · Accepted Answer · 2015-08-14 06:28:57Z

0

The alternating rows are the li, in which you have the data-row attribute. So:

li:nth-of-type(odd) [data-row="row"] {
    background-color: #B7CEEC;
}

answered Aug 14, 2015 at 6:28

Ronald Swets

1,65710 silver badges16 bronze badges

1 Comment

SamuraiJack Over a year ago

his doesnt work. My scenario is different. The divs might not necessarily be siblings. There can be parent child relationship. Can you make it work in my snippet?

Collectives™ on Stack Overflow

How to apply CSS on alternate elements with certain data-value?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related