CSS属性选择器优先级

Question

Anybody knows how I can achieve that the second selector (.resource-list li a[data-type="XXX"]) has a higher priority than the first (.resource-list[data-type="XXX"] li a)? Without rearranging the CSS?

.resource-list[data-type="jpg"] li a,
.resource-list li a[data-type="jpg"] /* This should have the highest priority */ {
    background-image: url(jpg.png);
}

.resource-list[data-type="pdf"] li a,
.resource-list li a[data-type="pdf"] /* This should have the highest priority */ {
    background-image: url(pdf.png);
}

See the fiddle: http://jsfiddle.net/8bG2j/

Answer 1

http://jsfiddle.net/8bG2j/2/

This should do it. Simply use a pseudoclass which is always true like a:not(s) .

It will raise your priority by the priority of the selector inside the :not statement.

Alternatively, as stated in the comments , you can prefix it with an ul when you don't want to break with older browsers (like IE 8). You can do this if .ressource-list will be always a class of an <ul> tag.

Answer 2

You can also simply bound a <ul> type selector in front of the class name, .resource-list for two latter selectors - as :not() isnt supported below IE9: fiddle

.resource-list[data-type="jpg"] li a,
ul.resource-list li a[data-type="jpg"]  {
    background-image: url(jpg.png);
}

.resource-list[data-type="pdf"] li a,
ul.resource-list li a[data-type="pdf"]  { 
    background-image: url(pdf.png);
}

Answer 3

bwoebi's solution is good enough, if you don't care about IE8 (which does not support :not() )

An alternative is to decrease the specificity of the first part of the selectors.

.resource-list[data-type="jpg"] a, /* less specific after omitting the "li" */
.resource-list li a[data-type="jpg"] {
    color: black;
}

.resource-list[data-type="pdf"] a,
.resource-list li a[data-type="pdf"] {
    color: red;
}

http://jsfiddle.net/8bG2j/4/