Prioritize id selector over an id and class

Question

I have a situation in which I load a style with a selector that should be prioritized over another. The situation looks like the one in this fiddle, in which a specific id selector is not being prioritized over another one that uses a class that is under a specific id.

--HTML
<div id="cont">
<p class="hello" id="hello">I wish I was blue</p>
</div>

--CSS
#hello {
    color:blue;
}
#cont .hello {
    color:red;
}

Result is red text

I'm pretty sure this could be possible without using !important - which I really would like to avoid since this will be maintained by designers with no css skills for A/B testing. I want to make a selector for them that they will only edit it's properties.

Edit: To be clear, the #hello selector is injected to the page and I want to change it to one that actually works, but I don't want to change the other selector for that purpose. Of course if I have no choice I will, but it seems reasonable to be that this css is valid as it is and overriding that selector should be possible without modifying it.

Answer 1

Simply use the :not selector to exclude the #hello element.

Change the first to:

#cont .hello:not(#hello) {
    color:red;
}

Demo Fiddle

More on :not from MDN

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

---

Alternatively- per the comments below, you can increase the specificity of the second selector whilst providing variations for various contexts:

#hello, #cont #hello, #hello.hello {
    color:blue;
}

Demo Fiddle

Answer 2

I suggest you to add another id selector to the first set of CSS rules.

 #cont #hello {
    color:blue;
   }

 #cont .hello {
    color:red;
   }

DEMO http://jsfiddle.net/a_incarnati/53q74jah/

In this case the color was overridden in red because you were using just one id selector #hello and that it's less specific than a selector with 2 ids combined or one id and one class combined, like you have done:

#cont .hello {
    color:blue;
}

One of the things to take into account when writing CSS code, it’s the concept of CSS specificity. Understanding well this concept will avoid you to have to use !important;

As Mozilla Developer Network defines it, specificity is nonetheless:

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

The following list of selectors is by increasing specificity:

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style

You can measure specificity counting how many selectors are present in a CSS statement.

CSS Specificity can be represented by 4 columns of priority:

inline=1|0|0|0

id=0|1|0|0

class=0|0|1|0

element=0|0|0|1

Left to right, the highest number takes priority.

Answer 3

You don't need two different selectors. You can keep one:

.hello {
    color:red;
}
#cont .hello {
    color:blue;
}

http://jsfiddle.net/vkftfj2n/4/