I have this html:

<div class="container">
    <div id="cell1" class="cell"><div class="content"></div></div>
    <div id="cell2" class="cell"><div class="content"></div></div>
    <div id="cell3" class="cell"><div class="content"></div></div>
</div>

CSS:

.container {
    width: 300px;
    height: 300px;
    background-color: green;
}

.cell {
    background-color: red;
}

#cell1 {
    width: 70px;
    height: 70px;
}

#cell2 {
    width: 70px;
    height: 70px;
}

#cell3 {
    width: 70px;
    height: 70px;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

.content {
    width:40px;
    height:40px;
    background-color:blue;
}

Javascript:

$(document).on('click', '.cell', function(e) {

    $(this).parent().children().removeClass('white');
    $(this).parent().children().children().removeClass('yellow');

    $(this).addClass('white');
    $(this).find('.content').addClass('yellow');
});

The problem I am having now is addClass('yellow') has no effect. However, if I delete the background-color in content class, it works. Any thoughts why?

jsFiddle link: /

Thanks for the answers, it works! But I really don't like using addClass and removeClass, is it posible to use e.currentTarget.id to achieve the same goal?

I have this html:

<div class="container">
    <div id="cell1" class="cell"><div class="content"></div></div>
    <div id="cell2" class="cell"><div class="content"></div></div>
    <div id="cell3" class="cell"><div class="content"></div></div>
</div>

CSS:

.container {
    width: 300px;
    height: 300px;
    background-color: green;
}

.cell {
    background-color: red;
}

#cell1 {
    width: 70px;
    height: 70px;
}

#cell2 {
    width: 70px;
    height: 70px;
}

#cell3 {
    width: 70px;
    height: 70px;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

.content {
    width:40px;
    height:40px;
    background-color:blue;
}

Javascript:

$(document).on('click', '.cell', function(e) {

    $(this).parent().children().removeClass('white');
    $(this).parent().children().children().removeClass('yellow');

    $(this).addClass('white');
    $(this).find('.content').addClass('yellow');
});

The problem I am having now is addClass('yellow') has no effect. However, if I delete the background-color in content class, it works. Any thoughts why?

jsFiddle link: http://jsfiddle/rexwang/FWh6E/

Thanks for the answers, it works! But I really don't like using addClass and removeClass, is it posible to use e.currentTarget.id to achieve the same goal?

• javascript
• jquery

• Thanks for the answers, even though it works, I still don't like this way. Is that possible to use e.currentTarget.id to achieve the same goal? – Rex Commented May 22, 2013 at 7:49
• Don't overplicate the things. Everything that is possible to achieve with CSS, should be achieved with CSS. – VisioN Commented May 22, 2013 at 7:50

5 Answers 5

It works but the .yellow background style is overriden by the .content background style, since in the stylesheet .content class goes after .yellow.

One way is to swap these classes in the CSS.

DEMO: http://jsfiddle/FWh6E/2/

The .addClass() is working but because of the way CSS rules are applied, the .content selector has more weight than the .yellow single class selector - see CSS specificity for a Star Wars themed explanation of specificity.

In the CSS documentation the final clause is being used to determine which rule is applied.

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

So you could either swap the order of the rules in the CSS file, moving .yellow after .content, or give the .yellow selector more weight by adding another selector to the chain, for example:

.content.yellow {
    background-color: yellow;
}

put !important for this

.yellow {
    background-color: yellow !important;
}

Try this FIDDLE

JSFIddle link: http://jsfiddle/Cj4PT/

Your code

.yellow {
    background-color: yellow;
}

Change to

.yellow {
    background-color: yellow!important;
}

.content background style was overriding .yellow style

Try this

Change CSS yellow as below:

.yellow {
    background-color: yellow!important;
}

Demo