CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tyialo
tyialo

Reputation: 13

How can I change the background for every second class of a div

I want to for every second div with a specific class col-forum-main-cat an another backgroundcolor. I tried it already with :nth-child(even) and (odd) but it doesn't work for me.

The markups is here, and the structure can't be changed, because of the CMS..

.col-forum-main-cat:nth-child(odd) {
    background:#dedede;
}
<div class="row row-forum-main-head">
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
</div>

Upvotes: 0

Views: 86

Answers (2)

lps
lps

Reputation: 1408

If you can't or don't want to use javascript then I would just manually make a new css class and apply it to every div that you want it on.

If this is something that can dynamically grow, then you'll want to use javascript. You can use jQuery's ":odd" selector to handle this. An example follows...

Javascript (using jQuery): 

$(".col-forum-main-cat").filter(":odd").addClass("col-forum-main-cat-odd");

CSS: 

.col-forum-main-cat-odd {
     background-color:#dedede;
}

HTML:

<div class="row row-forum-main-head">
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
</div>

Upvotes: 0

DaniP
DaniP

Reputation: 38252

I don't think it's possible with just CSS.

Since you tag this with Jquery you can use this code:

$(document).ready(function(){
  $( ".col-forum-main-cat" ).filter( ":odd" ).css( "background-color", "red" );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row row-forum-main-head">
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
</div>

Note:

You can also just use:

$( ".col-forum-main-cat:odd" ).css( "background-color", "red" );

But I use filter to make it more readable.

Upvotes: 1

Related Questions