Obscurity? CSS selector #myID.myClass

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

Obscurity? CSS selector #myID.myClass

Postposted on Thu Aug 19, 2010 8:30 am

I've been wondering if it is possible to use a CSS selector such as:
Code: Select all
#somediv {position:absolute;top:50px}
#somediv.special {top:0}

Turns out it is, but it's so obscure, apparently, that I couldn't find anything on it with Google and just had to try it out. And yet, it's pretty darn useful if I'm understanding CSS precedence correctly, as:
Code: Select all
#somediv {position:absolute; top:50px}
.special {top:0} /* won't work when applied to #somediv because of lower precedence */


I think....
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9068
Joined: Thu May 08, 2003 11:42 am
Location: Cincinnati, OH

Re: Obscurity? CSS selector #myID.myClass

Postposted on Thu Aug 19, 2010 8:48 am

flip-mode wrote:I've been wondering if it is possible to use a CSS selector such as:
Code: Select all
#somediv {position:absolute;top:50px}
#somediv.special {top:0}

Turns out it is, but it's so obscure, apparently, that I couldn't find anything on it with Google and just had to try it out. And yet, it's pretty darn useful if I'm understanding CSS precedence correctly, as:
Code: Select all
#somediv {position:absolute; top:50px}
.special {top:0} /* won't work when applied to #somediv because of lower precedence */


I think....


You are supposed to use IDs for unique content (e.g. content that is positioned) and classes for general content (e.g. style and formatting). Doing ".special {top:0}" might work in some browsers, but it is wrong. Also, doing #somediv.special is perfectly acceptable. You could even do some "#somediv p.special class" or something even more specific. I think that this is explained in the CSS specification. I suggest that you read it. It is probably the best source for information on CSS.
Disclaimer: I over-analyze everything, so try not to be offended if I over-analyze something you wrote.
Shining Arcanine
Gerbil Jedi
 
Posts: 1717
Joined: Wed Jun 11, 2003 10:30 am

Re: Obscurity? CSS selector #myID.myClass

Postposted on Thu Aug 19, 2010 9:24 am

Shining Arcanine wrote:You are supposed to use IDs for unique content (e.g. content that is positioned) and classes for general content (e.g. style and formatting). Doing ".special {top:0}" might work in some browsers, but it is wrong. Also, doing #somediv.special is perfectly acceptable. You could even do some "#somediv p.special class" or something even more specific. I think that this is explained in the CSS specification. I suggest that you read it. It is probably the best source for information on CSS.

:lol: Not the type of response I was expecting, but thanks. As you said:

ID is a unique element in the page - there can be only one. If the same ID is specified more than once, most likely the styles will be applied to the first instance only.

Class is a set of elements - the same class can be applied to multiple elements on the same page.

That's all well and good.

The issue, though, is precedence. ID takes precedence over class, so this problem arises: what if I want to override the styling of a particular ID on a couple of pages and do it in the most efficient way possible? To override the style of the ID, I could use an in-line style, or, I could use a style in the <head>, but both of those approaches require editing every page. #myID.myClass is the perfect solution and the simplest too - no javascript or anything like that required. #myID.myClass is more specific than #myID, and so it takes precedence.

What I find interesting and the point that I was making is that the ability to use the declaration syntax #myID.myClass is not mentioned on any tutorial site that I have come across and even several Google searches didn't turn up anything specifically applicable to that. I'm pretty certain it is just a matter of the specific search term I used, but there are only so many search terms that come to mind, so whatever terminology is used to describe this ability in the W3C CSS specifications must be just as obscure as the ability itself :lol:
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9068
Joined: Thu May 08, 2003 11:42 am
Location: Cincinnati, OH

Re: Obscurity? CSS selector #myID.myClass

Postposted on Thu Aug 19, 2010 10:57 am

I did just check the W3C CSS spec and while it does mention the ability to do .class.class, it does not mention #id.class
flip-mode
Gerbil Khan
Silver subscriber
 
 
Posts: 9068
Joined: Thu May 08, 2003 11:42 am
Location: Cincinnati, OH

Re: Obscurity? CSS selector #myID.myClass

Postposted on Fri Aug 20, 2010 8:47 am

flip-mode wrote:
Shining Arcanine wrote:You are supposed to use IDs for unique content (e.g. content that is positioned) and classes for general content (e.g. style and formatting). Doing ".special {top:0}" might work in some browsers, but it is wrong. Also, doing #somediv.special is perfectly acceptable. You could even do some "#somediv p.special class" or something even more specific. I think that this is explained in the CSS specification. I suggest that you read it. It is probably the best source for information on CSS.

:lol: Not the type of response I was expecting, but thanks. As you said:

ID is a unique element in the page - there can be only one. If the same ID is specified more than once, most likely the styles will be applied to the first instance only.

Class is a set of elements - the same class can be applied to multiple elements on the same page.

That's all well and good.

The issue, though, is precedence. ID takes precedence over class, so this problem arises: what if I want to override the styling of a particular ID on a couple of pages and do it in the most efficient way possible? To override the style of the ID, I could use an in-line style, or, I could use a style in the <head>, but both of those approaches require editing every page. #myID.myClass is the perfect solution and the simplest too - no javascript or anything like that required. #myID.myClass is more specific than #myID, and so it takes precedence.

What I find interesting and the point that I was making is that the ability to use the declaration syntax #myID.myClass is not mentioned on any tutorial site that I have come across and even several Google searches didn't turn up anything specifically applicable to that. I'm pretty certain it is just a matter of the specific search term I used, but there are only so many search terms that come to mind, so whatever terminology is used to describe this ability in the W3C CSS specifications must be just as obscure as the ability itself :lol:


Although I have never encountered that problem, it has been years since I have used CSS in a serious manner to run into such a rule. If I recall correctly, I never specified style information in IDs when I did use CSS seriously because I opted to specify it in the body and override that with classes. As a consequence, I never encountered that issue. I believe that the following can be used to override the precedence rules:

http://www.w3.org/TR/CSS2/cascade.html#important-rules

flip-mode wrote:I did just check the W3C CSS spec and while it does mention the ability to do .class.class, it does not mention #id.class


I was speaking off the top of my head earlier. In a sense, the specification does mention it, but not in the explicit manner you might expect. The section on descendant selectors suggests the possibility.

http://www.w3.org/TR/CSS2/selector.html ... -selectors

The specification was written by Computer Science people and it is a kind of unwritten rule in Computer Science that unless specified otherwise, the more general interpretation of a language is the correct interpretation. That idea follows from classes that Computer Science people are forced to take on context free grammars. In the descendant selector example presented in the specification, the statement "A B" is an expression where A and B are what are called nonterminal characters, which can be substituted for anything for which they are defined. While A and B are called elements, they are really references to elements and references need not identify the elements they reference by name. In an abstract sense of elements, the nonterminal character B could be a reference for the nonterminal characters "C D", so the expression would become "A C D", where any of A, C and D could be substituted for that kind of an expression, actual element names or selectors that refer to abstract elements. The end result of this expansion must have all terminal characters, which are characters that cannot be substituted. The expansion can result in many different things and all of them are considered correct by convention unless something in the document explicitly says otherwise.
Disclaimer: I over-analyze everything, so try not to be offended if I over-analyze something you wrote.
Shining Arcanine
Gerbil Jedi
 
Posts: 1717
Joined: Wed Jun 11, 2003 10:30 am


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 1 guest