CODEWITHSUNDEEP
csscss-selectors
Byran Zaugg
Byran Zaugg

Reputation: 957

CSS Selector Syntax

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 {...}

Upvotes: 0

Views: 1733

Answers (6)

N30
N30

Reputation: 3663

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.

Upvotes: 0

SLaks
SLaks

Reputation: 887453

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

Upvotes: 0

Mike Park
Mike Park

Reputation: 10941

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

Upvotes: 0

JasonWyatt
JasonWyatt

Reputation: 5303

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.

Upvotes: 0

Joey
Joey

Reputation: 354526

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.

Upvotes: 2

Laurence Gonsalves
Laurence Gonsalves

Reputation: 143154

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

Upvotes: 2

Related Questions