CODEWITHSUNDEEP
htmlcss
hrsetyono
hrsetyono

Reputation: 4464

CSS Selector - Safe to use only [type="text"] and not input[type="text"]?

I have been wondering whether it's safe to just use [type="text"] instead of input[type="text"] in CSS.

The reason is by using input[type="text"], I can't override it with a single class selector.

// HTML
<input type="text" class="has-error">

// CSS
input[type="text"] { color: black; } // has stronger specificity than below
.has-error { color: red; }           // won't override

So, is there any other element in HTML that use the type attribute? So far, I haven't met any other tag that uses it.

Thanks

Upvotes: 0

Views: 77

Answers (3)

Danield
Danield

Reputation: 125473

The following tags support the type attribute:

<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> (source)

and only the input tag has 'text' as a possible value for the type atttribute

So, yes, [type="text"] should do fine assuming the markup is written correctly and the rules inside such a selector will only be set on your input elements with type text.

Upvotes: 2

A.B
A.B

Reputation: 20445

yes it is safe to use until you dont have other element with type attribute, but if you have like "<ul>" can have type attribute you will select it too,but since you are also filtering it with "text" as a type so you wont conflict with built in tags but can conflict in plugins etc and you custom tags so make solution to have input[type="text"] instead

Upvotes: 1

Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7169

It's better to use it with tagname ( select by tagname and filter by attribute is much faster than select all tags and filter them - you can ignore this, but batter keep it in mind )

to override do this

input[type="text"] { color: black; }
input[type="text"].has-error { color: red; }

You can check here http://jsbin.com/rayinebaro/1/edit?html,css,output

Upvotes: 1

Related Questions