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 {...}
Byran Zaugg
  • 967
  • 9
  • 25
  • 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. – Roman Nov 24 '09 at 22:05
  • 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. – Caleb Nov 24 '09 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. – Doug Neiner Nov 24 '09 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. – Peter Stuifzand Nov 24 '09 at 22:41
  • 1
    Take a look at this similar question: [How to combine class and ID in CSS selector](http://stackoverflow.com/questions/1028248/how-to-combine-class-and-id-in-css-selector) – Roman Nov 24 '09 at 22:10

6 Answers6

2

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

Laurence Gonsalves
  • 137,896
  • 35
  • 246
  • 299
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.

Joey
  • 344,408
  • 85
  • 689
  • 683
  • Hmmm, it just occurred to me that [class selectors](http://www.w3.org/TR/CSS21/selector.html#class-html) 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. – BoltClock Feb 13 '13 at 12:27
  • This section has been rewritten in the latest [Selectors 3 module](http://www.w3.org/TR/selectors/#selector-syntax) (standardized in 2011), where it correctly lists all simple selectors. Note also that the current terminology will yet again be changed in Selectors 4. – BoltClock Feb 13 '13 at 12:30
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.

JasonWyatt
  • 5,275
  • 1
  • 31
  • 39
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.

Colin T Bowers
  • 18,106
  • 8
  • 61
  • 89
N30
  • 3,463
  • 4
  • 34
  • 43
0

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

Mike Park
  • 10,845
  • 2
  • 34
  • 50
0

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

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964