Different css classes with same property but different values

Question

I have 2 css classes that hold the background-color property. One class is for general elements and the other is for selected elements. I put the selected_element class on the element according to data i have in my model. This is the css:

.selected_obj {
    background-color: #00EE76
}

.general_obj{
    /* Othe CSS Properties */
    background-color: #d9d9d9;
}

This is my JSP:

<c:forEach items="${myModel.myCollection}" var="obj">
        <c:choose>
            <c:when test="${obj.id == myModel.selectedObj.id}">
                <div class="selected_obj general_obj">
                    <span>${obj.name}</span>
                </div>
            </c:when>
            <c:otherwise>
                <div class="general_obj">
                    <span>${obj.name}</span>
                </div>
            </c:otherwise>
        </c:choose>
    </c:forEach>

When i view the generated HTML, i can see the selected_obj class on the correct elements but the value is overriden by the backgroung-color property value of the general_obj class. How is the correct value selected by the brouwser and how can i overcome this?

Have you tried changing class="selected_obj general_obj" to class="general_obj selected_obj " ? — alestanis
– alestanis, Commented Oct 21, 2012 at 11:17

raina77ow · Accepted Answer · 2012-10-21 11:43:55Z

When two conflicting rules with the same specificity are to be applied, the latter one wins. ) In your case .general_obj background-color rule wins (= is actually applied), because it goes after the .specific_obj rule in CSS file.

This - class="general_obj selected_obj" - change in HTML will do nothing to fix the problem, as both classes will still have the same specificity.

One obvious approach to fix this problem is using !important:

.selected_obj {
    background-color: #00EE76 !important;
}

... as styles specified with !important will override the styles that otherwise should be applied (by following the general CSS cascading rules).

That goes well as a quick fix, but I'd actually strongly suggest against it (the reasons are described in this article quite well; CSS-Tricks also have a mighty word on that topic).

Instead you may either...

make a specific multi-class rule for such cases, like this:

.selected_obj, .selected_obj.generic_obj { background-color: #00EE76; }
(strongly suggested) fix the CSS file so that rules for generic classes are described first and rules for specific classes follow them.

Actually, it's a great rule of thumb: deal with all the generic things first, then work with specialties. )

Luca · Accepted Answer · 2012-10-21 12:06:38Z

0

you could try:

.selected_obj {
    background-color: #00EE76 !important;
}

? Notice also semicolon (;) at end. Missing semicolon can produce errors.

edited Oct 21, 2012 at 12:06

Luca

9,8155 gold badges48 silver badges61 bronze badges

answered Oct 21, 2012 at 11:20

Anton Bessonov

9,8933 gold badges41 silver badges39 bronze badges

2 Comments

Anton Bessonov Over a year ago

Add another line after background-color and you have not for everybody easy to find error.

Luca Over a year ago

using !important in general is not recommended, see e.g. the link in @raina77ow's answer

Collectives™ on Stack Overflow

Different css classes with same property but different values

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related