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

by

Is the attribute selector the modern CSS3 way and the way to go forward?

  • attribute is newer and better

No; actually, attribute selectors have been around since CSS2, and the disabled attribute itself has existed since HTML 4. As far as I know, the :disabled pseudo-class was introduced in Selectors 3, which makes the pseudo-class newer.

  • there’s a technical reason to use one over the other

Yes, to some extent.

With an attribute selector, you’re relying on the knowledge that the document you’re styling makes use of a disabled attribute to indicate disabled fields. Theoretically, if you were styling something that wasn’t HTML, disabled fields might not be represented using a disabled attribute, e.g. it might be enabled="false" or something like that. Even future editions of HTML could introduce new elements that make use of different attributes to represent enabled/disabled state; those elements wouldn’t match the [disabled] attribute selector.

The :disabled pseudo-class decouples the selector from the document you’re working with. The spec simply states that it targets elements that are disabled, and that whether an element is enabled, disabled, or neither, is defined by the document language instead:

What constitutes an enabled state, a disabled 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 the pseudo-class, the UA automatically figures out which elements to match based on the document you’re styling, so you don’t have to tell it how. Conversely, the attribute selector would match any element with a disabled attribute, regardless of whether that element actually supports being enabled or disabled, such as div. If you’re using one of the many modern frameworks that rely on such non-standard behavior, you may be better served by using the attribute selector.

In terms of the DOM, I believe setting the disabled property on a DOM element also modifies the HTML element’s disabled attribute, which means there’s no difference between either selector with DOM manipulation. I’m not sure if this is browser-dependent, but here’s a fiddle that demonstrates 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;

You’re most likely going to be styling HTML, so none of this may make any difference to you, but if browser compatibility isn’t an issue I would choose :enabled and :disabled over :not([disabled]) and [disabled] simply because the pseudo-classes carry semantics that the attribute selector does not. I’m a purist like that.

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. Does CSS have a :blur selector (pseudo-class)?
  6. What is the difference between :focus and :active?
  7. How to select the first, second, or third element with a given class name?
  8. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  9. What’s the difference between CSS3’s :root pseudo class and html?
  10. Why doesn’t this CSS :not() declaration filter down?
  11. CSS 3 nth of type restricted to class [duplicate]
  12. How to show the first N elements of a block and hide the others in css?
  13. Is there an opposite CSS pseudo-class to :hover?
  14. Is there a CSS parent selector?
  15. Complex CSS selector for parent of active child [duplicate]
  16. Select every Nth element in CSS
  17. CSS3 selector :first-of-type with class name?
  18. CSS Selector that applies to elements with two classes
  19. CSS selector based on element text? [duplicate]
  20. Pure CSS checkbox image replacement
  21. Handling a colon in an element ID in a CSS selector [duplicate]
  22. CSS selector for attribute names based on a wildcard
  23. IE8 :nth-child and :before
  24. CSS selector to select first element of a given class
  25. Style child element when hover on parent
  26. Can I use variables for selectors?
  27. CSS: styled a checkbox to look like a button, is there a hover?
  28. :active css selector not working for IE8 and IE9
  29. Multiple descendant children selector with css [duplicate]
  30. What is the difference between pseudo-classes and pseudo-elements?

Leave a Comment