Personal computing discussed

Moderators: renee, SecretSquirrel, just brew it!

 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Obscurity? CSS selector #myID.myClass

Thu Aug 19, 2010 9:30 am

I've been wondering if it is possible to use a CSS selector such as:
#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:
#somediv {position:absolute; top:50px}
.special {top:0} /* won't work when applied to #somediv because of lower precedence */


I think....
 
Shining Arcanine
Gerbil Jedi
Posts: 1718
Joined: Wed Jun 11, 2003 11:30 am

Re: Obscurity? CSS selector #myID.myClass

Thu Aug 19, 2010 9:48 am

flip-mode wrote:
I've been wondering if it is possible to use a CSS selector such as:
#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:
#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.
 
flip-mode
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: Obscurity? CSS selector #myID.myClass

Thu Aug 19, 2010 10: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
Grand Admiral Gerbil
Topic Author
Posts: 10218
Joined: Thu May 08, 2003 12:42 pm

Re: Obscurity? CSS selector #myID.myClass

Thu Aug 19, 2010 11: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
 
Shining Arcanine
Gerbil Jedi
Posts: 1718
Joined: Wed Jun 11, 2003 11:30 am

Re: Obscurity? CSS selector #myID.myClass

Fri Aug 20, 2010 9: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.

Who is online

Users browsing this forum: No registered users and 1 guest
GZIP: On