Does order of tag, id, class and attribute in CSS selector matter?

Question

Consider the following HTML markup:

<input id="foo" class="bar" name="baz">

Are the following selectors equal (or even valid):

CSS

input#foo.bar[name=baz] { }
input.bar#foo[name=baz] { }
input[name=baz].bar#foo { }
/* etc */

And is it possible to move the element name to, say, end?

Edit: I know what specificity is, I want to know in which order the tag, id, class and attributes need to be specified.

Answer 1

They are all valid, as they comply with the syntax of sequence of simple selectors. They are equivalent, since their meaning, including specificity, are defined in a manner that does not depend on the order of the components.

It is not possible to move the element name (type selector) to the end, for purely syntactic reasons. The spec says that a simple selector “always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence”. This is to be interpreted so that the type selector, if present, must appear first. This is natural since there would be no way to distinguish it from e.g. a preceding class selector (a space could not be used since it has a quite special meaning in CSS selector syntax: .bar input is a valid selector and means something quite different from input.bar).

Answer 2

Please refer the answer of @Jukka as OP seemed to have changed the meaning of the question by minor edit, but if anyone's interested in specificity question before edit, than please read ahead.

---

First of all, neither of the selectors make sense, to be true, they are over specific.

Your selector holds an id which will be unique, so defining class as well as attr=val is not required ^{(If you are not using the same id for other element in some OTHER document..)}

If for some case, you need them, say to override, like... (makes sense)

input#foo.bar[name=baz] {
   /* More specificity overrides the selector below */
}

input[name=baz] {
   /* Styles here */
}

Are the following selectors equal - YES, they are equal as far as the specficity goes, they all return a score of 121

^Credits

---

(or even valid) - Completely Valid

---

Does order of tag^{(Not relevant)}, id, class - NO, whatever the order of attributes are, it doesn't matter.

BUT

The order of your CSS declaration block in the stylesheet matters, the last selector will override common properties as all the three selectors have equal specificity.

Demo (All three will render green text, regardless of the order of their attributes, but if you shuffle the CSS selectors block, the last one will override the common properties of previous two selectors - unless you define !important in one of the selector properties)

---

And is it possible to move the element name^(Attribute) to, say, end? - YES

---

Pros & Cons —

• All the selectors are overspecific
• Bad as far as performance goes
• Using attr=val selector, you are assuming that the value of the name attribute won't change, if it does, you will have to change your selectors as well.

P.S : Have an habit of quoting the attribute values.