To add a different color using jquery and css

Question

<div id="autoSuggestedPlaces">

      <div>
           <div>

          </div>
      </div>

      <div>
           <div >

          </div>
      </div>

      <div>
           <div>

          </div>
      </div>


</div>

my html markup is lookes like this i want to add, i want to add even div have diffrent bacground color and odd div have diffrent color, I tried this but using div.even and div.odd but its not working.

Answer 1

Try using :even and :odd

div.even will select all div elements with class name even.

Also as pointed out by @Haim never use same id for multiple elements.

.first
{
    background-color: yourfirstcolor;
}


.second
{
    background-color: yoursecondcolor;
}

$("#autoSuggestedPlaces div:even").addClass("first");
$("#autoSuggestedPlaces div:odd").addClass("second");

Answer 2

the code is like :

 $("div:odd").css("background-color", "#F4F4F8");
  $("div:even").css("background-color", "#EFF1F1");

and Using the same ID twice in the same document is not valid HTML. Fix your HTML.

Answer 3

Try this

$("div#autoSuggestedPlaces div div:even").css("background-color", "#bbbbff");
$("div#autoSuggestedPlaces div div:odd").css("background-color", "#ffffff");