CSS Selector Syntax

Question

For this HTML:

<div id="idName" class="className">
...
</div>

I know this is correct selector syntax:

div.className {...}
div#idName {...}

By mistake I did:

#idName.className {...}

It seams to work but I don't think it's valid. Can anyone confirm if this is valid?

Edit:

To clarify, this id will be on many pages and, depending on the use of the page, may have different classes.
Page A:

#content.one-column {...}

Page B:

#content.two-column {...}

Answer 1

Yes, that's fine, though the meaning is different. Saying "#idName" instead of "div#idName" does not restrict to div elements.

Answer 2

It is valid. There is no rule that ID selectors have to come after class selectors.

To quote from the standard (emphasis mine):

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.

Answer 3

It's perfectly valid, but kind of redundant. If you were to turn it into english it would say "select all elements with the id 'idname' and class 'className'". It's redundant because you can only have one instance of an element with a particular ID.

Answer 4

Even if it is valid or not, there can not be more than one html node with same id in a valid HTML document, so I guess you can just use div #idName

Answer 5

I believe it is valid syntax, as your class may change with the same id. However, you may run into this

Answer 6

#id.className is a perfectly valid selector that will select all elements with both the ID and the class.

Answer 7

Take a look at this similar question: How to combine class and ID in CSS selector

Answer 8

Here is some detailed info about CSS selectors