CSS attribute selector priority

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/

@w3jimmy I quote from the question: Without rearranging the CSS? — bwoebi
– bwoebi, Commented Jun 6, 2013 at 13:14
@w3jimmy then you would still have the same issue when the situation (html structure) is reversed — xec
– xec, Commented Jun 6, 2013 at 13:24

xec · Accepted Answer · 2013-06-06 13:15:29Z

1

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/

answered Jun 6, 2013 at 13:15

xec

18.1k3 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jakub_jo Over a year ago

This was the key! I've tried this sooner, but it did not workend - maybe I misstyped something. Anyways - now it's working. Thank you!

bwoebi · Accepted Answer · 2013-06-06 13:17:00Z

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.

edited Jun 6, 2013 at 13:17

answered Jun 6, 2013 at 13:10

bwoebi

23.8k5 gold badges64 silver badges81 bronze badges

3 Comments

bwoebi Over a year ago

@Andy yes, but the it'll bound to the ul. I didn't want to change the possibly targeted elements.

xec Over a year ago

:not() on its own does not have any specificity. the added specificity comes from the selector inside ("s" in this case)

bwoebi Over a year ago

@xec thanks, just reread the w3 specification; they used there an example with #id:not(FOO) and I thought FOO + pseudoclass would give 101; and not because of the #id...

Adrift · Accepted Answer · 2014-02-01 03:06:39Z

1

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

edited Feb 1, 2014 at 3:06

answered Jun 6, 2013 at 13:13

Adrift

60k12 gold badges98 silver badges92 bronze badges

Collectives™ on Stack Overflow

CSS attribute selector priority

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related