0

Somehow I am curious, why CSS create two ways for accessing attribute, I know for selector most of us use :hover, :visited, etc. But there are selectors that can be access using attribute selector, e.g: :disable, :readonly, etc.

Is there any benefit using selector instead of attr selector?

Thanks before :)

user5436320
  • 133
  • 2
  • 17

1 Answers1

2

It is a little unclear exactly what you mean, but this Mozilla article might be informative:

Writing Efficient CSS (MDN)

It has a nice overview of the selector types, when they are useful, and general performance of the selector.

Note that this article is way out of date, but in general selectors based on ID are very efficient and ones based on attributes are less efficient (though many would argue that worrying about efficiency of your css selectors is quite a premature optimization).

But in general, there are different types of selectors for different situations, depending on the structure of your page.

Also, :hover and :visited aren't attribute selectors, they are "pseudo-class" selectors.

:hover would apply to most elements, :visited would only apply to hyperlinks, :readonly would only apply to input boxes...

In CSS terms, an "attribute selector" is one that would select elements based on an HTML attribute. For example this attribute selector would match this element:

<input type="text" name="some-data" />

[type="text"] {
    ...
}
CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138
  • The user appears to be asking if there's any benefit or downside to using a pseudo-class over an attribute selector for selecting based on the same criteria. For example, :disabled over [disabled]. – BoltClock Oct 15 '15 at 03:31