html - Is an attribute selector for the ID attribute less specific than an ID selector? -


what need give [id^=value] selector same specificity regular id, , why isn't equal or greater already? (considering gave html well)

html div[id^="blue"] {     background-color: blue }  #blue4 {     background-color: red } 

jsfiddle: http://jsfiddle.net/bjwe6yr0/1/

an attribute selector less specific id selector; specificity value not change based on attribute name. selectors maps specific attribute names class selectors , id selectors; attribute selector generic concept , not contain such mappings.

the only way complex selector have id specificity if contains 1 or more id selectors. implementation limits aside, theoretically not possible override single id selector number of attribute selectors or other type of simple selector.

here how 2 selectors compare:

/* 1 attribute, 2 types -> specificity = 0-1-2 */ html div[id^="blue"] {     background-color: blue }  /* 1 id                 -> specificity = 1-0-0 */ #blue4 {     background-color: red } 

even addition of html doesn't because it's type selector. change :root , pseudo-class equally specific attribute selector, , still less specific id.


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -