0

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 {...}
Improve this question
5
  • This expression isn't very useful, because ID by itself uniquely identifies element, further CSS selector narrowing has no sense. As opposite, '.class1.class2' selector is 100% valid and useful. Commented Nov 24, 2009 at 22:05
  • 1
    Take a look at this similar question: How to combine class and ID in CSS selector Commented Nov 24, 2009 at 22:10
  • 1
    Further CSS narrowing can actually be useful for things like: div#myId.selected If you're adding / removing the class in javascript. This selector will not work in IE6 so be careful with it. Commented Nov 24, 2009 at 22:15
  • 1
    @Roman, it is very useful. HTML spec says the id has to be unique to that page, not to an entire site. Specifying both id and class allows you to target a specific element on specific areas/pages throughout a site. Commented Nov 24, 2009 at 22:16
  • @dcneiner It doesn't work like that. You can't use CSS to target an element on a page while you're on another page. The CSS on a page only applies to the page you're currently on. Commented Nov 24, 2009 at 22:41

6 Answers 6

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hmmm, it just occurred to me that class selectors are missing from this sentence in the CSS2.1 spec document. Also, to be clear, "any order" refers to the ordering of attributes, IDs, classes and pseudo-classes only - the type/universal must always come first, and if you have a pseudo-element it must come last, and there can only be at most one of type/universal and one pseudo-element.
This section has been rewritten in the latest Selectors 3 module (standardized in 2011), where it correctly lists all simple selectors. Note also that the current terminology will yet again be changed in Selectors 4.
2

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

Improve this answer

2 Comments

Technically it does if you have it on a div because all id's must be unique.
Yes, but the same css file could be for several different pages with different elements bearing that id name.
0

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.

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.