Is there a way to allow selectors of a selected element to take precedence over selectors on parent elements?

Question

Consider the following example: http://jsfiddle.net/j6SpZ/

HTML:

<div class="container"> <a>Foobar</a> <a class="pink">Pink</a> <a class="gray">Gray</a> </div> 

CSS

 a { border: 1px solid black; padding: 20px; display: block; } a.gray { background-color: gray; } a:hover { background-color: teal; } .container a { background-color: transparent; } a.pink { background-color: pink; } 

Result:

---

So, everything happens according to the specification.

The style priority values ​​for the last four selectors are all (0,0,1,1): 1 class + 1 element. You get the expected transparent background for the first and third fields (even when hovering), because .container a appears after a.gray and a:hover . You turn pink on the second because a.pink appears after .container a . Cool (if I misinterpreted the spec, let me know, but I think I'm for the money).

But my question revolves around the semantics of resolving selectors on parent elements, which have the same impact on specificity as selectors on a modified element. I believe that the gray class selector is definitely “closer” and more specific to the element than the container class selector for the parent element and that the a.gray style a.gray should have higher priority.

Is there a way to do this this way, or a philosophy that I can follow to resolve the dissonance in my thoughts?

Actual application:

I have a select button style that makes up the following:

 .options a { background-color: gray; } .options a:hover { background-color: blue; } 

In principle, the selection buttons are gray and blue on hover. Now I want to put them in a special area where I want the default behavior to have a transparent background:

 .env1 .subenv1 .options a { background-color: transparent; } 

But now this announcement has priority even over :hover , and I do not want this. I still want his guidance behavior to be the same; I just want the default background to be transparent. Of course, I can redeclare hover styles, but this repeats that information which is unideal. I have no problem sucking it and just re-announcing, this is what I am doing right now, but of course there must be a way to make this make sense in my head.

Answer 1

What if you move the ad :hover to the end? Seems to work on your violin.

I don’t know if this is a philosophy, but CSS considers the order of declaration when calculating the priority of rules. It is not always possible to achieve what you want, but perhaps in the case that you are talking about.

Answer 2

If you always want the hover style to work, you can add! important for style. This will mean that background-color in :hover will take precedence over other declarations. I demonstrated this in your violin here .

It is best to avoid using important ones, however, if this is considered the final type of guidance for this element, it is normal to use.

Answer 3

A .container a.gray type selector has higher specificity and should fix the problem. Or move the a.gray rule to the end, later the rules have higher specificity.

Answer 4

@ Sam152, @harpo and @chrisdowney - all right. Essentially, you need to change the CSS weight (or specificity) of each rule so that it matches the exact desired order. Obtaining this balance in this case can be difficult. You can use a combination of adding selectors (@chrisdowney answer), rule order (@harpo answer), or adding important (@ Sam152 answer). They all change the order in which the rules are applied.

CSS Specific Features is a good tutorial on how to calculate the value and therefore be able to adjust any rules to suit your specific rules order requirements.

Be sure to use a CSS browser developer tool such as Firebug (Firefox), Developer Tools (Chrome), "F12 Develeper Tools" (IE) or similar to help you determine the order that applies and quickly see what affects your adjustments.

! the important thing is, as a rule, discouraged, because it limits you later ... But you may have reached a point where the ideal solution for reliability can interfere with the job and set off. And depending on how complicated the rest of the set of sites / rules is, it may not even matter much.

In the end, all the adjustments mentioned will work well in your case. This means that there are several solutions to your problem. Use what suits you best.