CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-extensioncss-selectors
WORMSS
WORMSS

Reputation: 1674

CSS specificity not working as expected in Chrome

After reading 6.4.3 Calculating a selector's specificity what I expected to happen and what actually is happening seems to contradict. It is obvious that I am understanding it wrong. If someone could give me a brief explanation of why I am wrong on this 1 point and how I can work around it, that would be great.

/* opt.css */
#opt input[type="text"] { width: 200px; }
#tok { width: 300px; }

/* opt.html */
<div id="opt"><input id="tok" type="text" /></div>

I was expecting, since #tok is more specific than #opt input[type="text"] the width of the input box would be 300px, but its 200px.

#opt input[type="text"]  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
#tok                     /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

I can see by Chrome Inspector that the 200px is getting the priority and that 300 is crossed out, so my understanding of specificity is wrong. I just don't understand how I am getting this wrong. Does b not override c and d?

Also how to work around this.

Thank you for any help.

Upvotes: 2

Views: 435

Answers (1)

Pete
Pete

Reputation: 58462

#tok is less specific than #opt input[type="text"]:

#tok                     /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
#opt input[type="text"]  /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */

b = number of ids
c = number of attributes and pseudo-classes
d = number of element names and pseudo-elements

Upvotes: 4

Related Questions