CODEWITHSUNDEEP
csscss-selectors
jakub_jo
jakub_jo

Reputation: 1634

CSS attribute selector priority

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/

Upvotes: 1

Views: 221

Answers (3)

Adrift
Adrift

Reputation: 59769

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);
}

Upvotes: 1

bwoebi
bwoebi

Reputation: 23777

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.

Upvotes: 1

xec
xec

Reputation: 18024

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/

Upvotes: 1

Related Questions