CSS selector priority

Question

Why does the css selector

select, textarea, input[type="text"], input[type="password"],input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input

take precedence over

input.text-style

for the following html:

<input type="text" required="required" name="poemDataCollector[name]" id="poemDataCollector_name" class="text-style">

I read that class should have priority over html tags...

It's called specificity value, I've posted a good answer on it once, let me find it — Madara's Ghost, Jul 11 '12 at 06:53
Your first selector should only take precedence if it is declared after your second selector. — BoltClock, Jul 11 '12 at 06:56

score 4 · Accepted Answer · edited May 23 '17 at 12:04

4

Attribute selectors are equally specific to class selectors.

if you want to override the class your can write like this:

input.text-style[type="text"]

Check this decision for more What is the specificity of the attribute selector?

Read this http://www.w3.org/TR/selectors/#specificity

edited May 23 '17 at 12:04

Community

1
1

answered Jul 11 '12 at 06:53

sandeep

91,313
23
137
155

CSS selector priority

1 Answers1