Should I use CSS: a disabled pseudo-class or an [disabled] attribute selector or is it a matter of opinion?

Question

I am trying to style disabled input. I can use:

.myInput[disabled] { } 

or

 .myInput:disabled { } 

Is the attribute a selector of the modern CSS3 way and way forward? I used to use a pseudo-class, but I can not find information on whether they are in the old way and will not be supported, or both of them are equal, and you can use whatever you like best.

I do not need to support older browsers (this is an intranet application), so it is:

• Attribute
• is newer and better
• pseudo-class is still on the way
• depending on what you like best
• there is a technical reason to use one over the other

Answer 1

Is the attribute a selector of the modern CSS3 way and way forward?

• Attribute
• is newer and better

No; in fact, attribute selectors were around with CSS2 , and the disabled attribute itself existed with HTML 4 . As far as I know, the :disabled class pseudo-class was introduced in Selectors 3 , which makes the pseudo-class more recent.

• there is a technical reason to use one over the other

Yes, to some extent.

With the attribute selector, you rely on knowing that in the document style you use the disabled attribute to indicate disabled fields. Theoretically, if you were developing something that wasn't HTML, disabled fields might not display using the disabled attribute, for example. it could be enabled="false" or something like that. Even future releases of HTML may introduce new elements that use different attributes to represent on / off status; these elements will not match the [disabled] attribute selector.

The :disabled pseudo- :disabled separates the selector from the document you are working with. The specification simply states that it targets elements that are disabled, and whether the element is enabled, disabled or not, defined by the language of the document :

What constitutes an on state, an off state, and a user interface element is language dependent. In a typical document, most elements will be neither :enabled nor :disabled .

In other words, when you use a pseudo-class, UA automatically determines which elements should match based on your style, so you don't need to talk about it.

In terms of the DOM, I believe that setting the disabled property on the DOM element also changes the HTML attribute disabled , which means there is no difference between the selector with the DOM manipulation. I'm not sure if this depends on the browser, but here is a fiddle that shows it in the latest versions of all major browsers:

 // The following statement removes the disabled attribute from the first input document.querySelector('input:first-child').disabled = false; 

Most likely, you will develop HTML code, so none of this can affect you, but if browser compatibility is not a problem, I would choose :enabled and :disabled over :not([disabled]) and [disabled] just because pseudo-classes carry semantics that are not in the attribute selector. I'm such a purist.

Answer 2

It turns out that Internet Explorer 10 and 11 does not recognize pseudo-text :disabled for some elements and only works with attribute selector syntax.

 #test1:disabled { color: graytext; } #test2[disabled] { color: graytext; } 

 <form> <fieldset id="test1" disabled>:disabled</fieldset> <fieldset id="test2" disabled>[disabled]</fieldset> </form> 

The code above is displayed in IE as follows:

As long as you are just an input style, you should be fine. However, it’s good advice to check the final result in all the browsers you want to support.