 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / September 2007div#header vs. #header
I am retooling my design habits, trying to get rid of some mental artifacts, and trying to "standardize" my starting point "templates" (both html and css). I am also trying to avoid "div-itis." I find myself using selectors like div#header instead of just #header. I know that div#header and #header both refer to the same target, and (for me) it is easy to see exactly what the style is being applied to. Any thoughts, pro and con, on one method versus the other? > I am retooling my design habits, trying to get rid of some mental > artifacts, and trying to "standardize" my starting point "templates" [quoted text clipped - 3 lines] > it is easy to see exactly what the style is being applied to. Any > thoughts, pro and con, on one method versus the other? The do not necessarily apply to the same target. Without specifying 'div', the style could be applied to any tag with id="header" (though, of course, there must be only one in a single page). If you want to apply those styles to div#header in one file and h1#header in another, use #header. If you only want them applied to div#header, then use that.  SignatureChris F.A. Johnson <http://cfaj.freeshell.org> =================================================================== Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) > The do not necessarily apply to the same target. Without specifying > 'div', the style could be applied to any tag with id="header" > (though, of course, there must be only one in a single page). So, like I said, they refer to the same target (on any given page.) :-) > If you want to apply those styles to div#header in one file and > h1#header in another, use #header. If you only want them applied to > div#header, then use that. Good point. I actually hadn't thought about having tags on different pages styled per a given ID, but this tends to defeat my "standardization" theory. I still like the idea that I can get a feel for the number of divs on a page by looking at the stylesheet (i.e. div#header, div#copy, div#footer, div#etc ...). >> If you want to apply those styles to div#header in one file and >> h1#header in another, use #header. If you only want them applied to [quoted text clipped - 7 lines] > page by looking at the stylesheet (i.e. div#header, div#copy, > div#footer, div#etc ...). Are you saying that every page in your site has a different styling? Or that you style each page identically, but separately and repetitively? If the answer to either of these questions is yes, you're missing out on a big advantage of using CSS. (And if the pages /are/ all different, it's probable that your visitors hate you for it. :-( ) If you're already styling (as opposed to using countless <FONT> tags, say), then *style*, darn it, and use the centralization and "standardization" of an external stylesheet to your advantage. You probably have other things to do besides style Web pages... SignatureJohn Pondering the value of the UIP: http://improve-usenet.org/ > Are you saying that every page in your site has a different styling? Or > that you style each page identically, but separately and repetitively? > If the answer to either of these questions is yes, you're missing out on > a big advantage of using CSS. (And if the pages /are/ all different, > it's probable that your visitors hate you for it. :-( ) No, I'm saying each site has a specific look and feel, with some minor variations throughout. Each page starts from a core template for that site. If I start seeing a lot of divs on my stylesheet, or start seeing that each additional page needs too much "touch up", I may have to reexamine the original html document to see if there is an underlying structural problem. > If you're already styling (as opposed to using countless <FONT> tags, > say), then *style*, darn it, and use the centralization and > "standardization" of an external stylesheet to your advantage. You > probably have other things to do besides style Web pages... I am. My question was regarding a specific naming convention. see my reply to Yucca. Scripsit William Gill: >> The do not necessarily apply to the same target. Without >> specifying 'div', the style could be applied to any tag with [quoted text clipped - 3 lines] > So, like I said, they refer to the same target (on any given page.) > :-) No, on any page that has an id="header" attribute in any element that is not a div element, #header refers to that element whereas div#header does not refer to any element. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > No, on any page that has an id="header" attribute in any element that is > not a div element, #header refers to that element whereas div#header > does not refer to any element. I know, div#header and #header CAN possibly refer to different elements, but if I adopt a specific consistent naming convention (i.e. div#header vs. #header) I will never have a div with the id="header" along with any other element having id="header" (that would violate MY convention). When I edit my stylesheet I see div#header, div#nav, div#copy, div#footer, div#etc..., and know that the style applies to an entire block. If I use just the #header convention, it's not obvious that header is an entire div, and not just a single h1 element. It may be my "black box" or "object oriented" way of thinking, or the result of having to organize my thoughts differently since introducing the front bumper of my 55 mph southbound Audi to the 55 mph northbound bumper of a pickup truck several years back. So, with this all in mind, is there any serious pitfall to using the more self documenting naming convention? Scripsit William Gill: >> No, on any page that has an id="header" attribute in any element >> that is not a div element, #header refers to that element whereas >> div#header does not refer to any element. > > I know, div#header and #header CAN possibly refer to different > elements, No, they cannot. Please read what I explained. It is incorrect to say that they always refer to the same element (as you said previously), and it is also incorrect to say that they can refer to different element (as you now said), > but if I adopt a specific consistent naming convention Umm... > (i.e. div#header vs. #header) That's not a naming convention. That's a matter of using selectors. > I will never have a div with the > id="header" along with any other element having id="header" (that > would violate MY convention). It would violate HTML syntax, in a manner that a validator would report. So it is irrelevant whether it violates your personal conventions. > If I use just the #header > convention, it's not obvious that header is an entire div, and not > just a single h1 element. Why would that matter? If you use #header, you can move from <h1 id="header">...</h1> to <div id="header"><h1>...</h1>...</div> whenever you decide to move something into the header but outside the h1 element. Why would you intentionally make that more difficult? Anyway, whatever approach you're using, both of your statements about the relation between #header and div#header were incorrect and misleading. In a public discussion, that's more important than your private conventions. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit William Gill: > [quoted text clipped - 3 lines] > No, they cannot. Please read what I explained. It is incorrect to say > that they always refer to the same element (as you said previously), and We seem to have a misaligned context. I never said always. I was talking about specific documents (mine) , using specific selectors (div#header and #header) for a specific element( <div id="header">). You chose to globalize my comment. It's like they say in court "assumes facts not in evidence." You assumed that I might want div#header to refer to something I never intended. What I did (at least mean to) say was, "as I use them" they refer to the same element. For example "div#header" or "#header" would both apply the style to <div id="header"> in my html (wouldn't they?). I understand specificity, div#header is more specific than #header. I never mentioned <h1 id="header">. People, including yourself, politely pointed out that <h1 id="header"> is not the same as <div id="header">. Yes, I know, but thank you for pointing that out. No sarcasm intended, I really do appreciate it. If I had wanted to apply that style to something other than an identified div, it could have been a problem. > it is also incorrect to say that they can refer to different element (as > you now said), If I had a page with <div id="header"> #header would style it. Likewise, if I had <h1 id="header">, #header would style it. Two different elements. If I have a style sheet with both div#header and #header, the first (more specific) will style only pages containing <div id="header">. The second will style any element with an id of "header", possibly div's or h1's. If I tried to have <div id="header"> and <h1 id="header"> on the same page, that would violate HTML syntax. > No, on any page that has an id="header" attribute in any element that > is not a div element, #header refers to that element whereas > div#header does not refer to any element. Then what exactly does div#header refer to, if not an identified div element? >> but if I adopt a specific consistent naming convention > [quoted text clipped - 3 lines] > > That's not a naming convention. That's a matter of using selectors. If I had a page with <div id="header">, my stylesheet could use either selector #header or div#header, correct? So by naming convention, I mean I would prefer using the latter, more specific selector, in my stylesheet. This gives me a clue to the structure of what I'm styling. >> I will never have a div with the >> id="header" along with any other element having id="header" (that >> would violate MY convention). > > It would violate HTML syntax, in a manner that a validator would report. > So it is irrelevant whether it violates your personal conventions. It violates HTML syntax if they are on the same page, and my convention if I have header div's on some pages, header h1's on some pages, and still other header elements on other pages. This kind of hodge-podge across a site is total chaos for me. > Why would that matter? It matters to me, because It allows me to think of the header as a unit, a "black box", or an "object". Any pieces that make up that "object" are irrelevant outside of it, basic OOP(object oriented programming) thinking. > If you use #header, you can move from <h1 > id="header">...</h1> to <div id="header"><h1>...</h1>...</div> whenever > you decide to move something into the header but outside the h1 element. I see your point. Another context misalignment, my thinking is based on the fact that my header sections (almost) always include more than just one element. They usually have an image and one or two levels of <h#>. My point of reference was a specific set of circumstances, making what I said accurate, but under other circumstances you are correct. I guess if I start out with a site that has single element headers and later they become multi-element div headers that would be a problem. > Why would you intentionally make that more difficult? As I said, having a hodge-podge of types of headers (some div's, some h1's) scattered throughout the site makes things VERY difficult for me. I find walking very easy, but I would never presume to ask someone on crutches "Why would you intentionally make that more difficult?" I don't particularly like having to use post-it notes for short term memory, but I do it because that is what works for me. In this case having the structural cue (div#header == header is a div block) helps me visualize. > Anyway, whatever approach you're using, both of your statements about > the relation between #header and div#header were incorrect and > misleading. In a public discussion, that's more important than your > private conventions. Yes, in a public forum, if I implied #header and div#header were the same thing, that is misleading, and I apologize. So, once more, (and hopefully I will make myself CLEAR this time); 1) div#header is more specific than #header 2) headers for this site are divs 3) id must be unique in a document 4) div#header and #header are the same target in documents on this site 5) using div#header in my stylesheet provides a clue to the structure of what is being styled. So WHEN both div#header and #header refer to the same target, is there any reason not to use div#header? Scripsit William Gill: > I was > talking about specific documents (mine) , using specific selectors > (div#header and #header) for a specific element( <div id="header">). You didn't say that. When you make general statements, other people expect you to mean them to be taken as general. >> it is also incorrect to say that they can refer to different element >> (as you now said), > > If I had a page with <div id="header"> #header would style it. > Likewise, if I had <h1 id="header">, #header would style it. Two > different elements. The selectors #header and div#header can never refer to two different elements. In any given document, they either refer to the same element, or one of them refers to an element and the other does not, or neither of them refers to any element. You are now saying that #header in one document and #header in another document may refer to different elements. That's either grossly self-evident or wrong, depending on what you mean by that. You have just managed to confuse people with your explanations, probably mostly yourself. > If I have a style sheet with both div#header and #header, the first > (more specific) will style only pages containing <div id="header">. I have no idea of what point you are trying to make, and specificity has nothing to do with the rather trivial fact that div#header refers to the div element with id="header", if it exists. >> No, on any page that has an id="header" attribute in any element that >> is not a div element, #header refers to that element whereas >> div#header does not refer to any element. > > Then what exactly does div#header refer to, if not an identified div > element? You already said what it refers to, and this has nothing to do with the point that I made and that proves that you were wrong in saying that #header and div#header can refer to two different elements. >> That's not a naming convention. That's a matter of using selectors. > > If I had a page with <div id="header">, my stylesheet could use either > selector #header or div#header, correct? You can use them in any case (though they might refer to no elements). This has nothing to do with naming conventions. > So WHEN both div#header and #header refer to the same target, is there > any reason not to use div#header? It depends on how you use CSS as a whole. As already explained, the selectors have different specificity. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit William Gill: > [quoted text clipped - 4 lines] > You didn't say that. When you make general statements, other people > expect you to mean them to be taken as general. No, what I said was "I find myself using selectors like div#header instead of just #header." The implication was that they were intended to referred to the same target by two different notations. Chris cautioned that "they do not necessarily apply to the same target." (which I knew), but they CAN, and which is how I intended to use them. He also noted (and I also knew) there can be only one element with an id "header" per document. So, my point is if that one element is in fact a div, then div#header, and #header both refer to it. A further point is that if all the headers throughout the site are div id="header", discussing h1 id="header" seems to be a moot point. Unfortunately, my flip response just opened the door for you to assume the worst. BTW I did go back and apologize to Chris for my flippancy. >>> it is also incorrect to say that they can refer to different element >>> (as you now said), [quoted text clipped - 5 lines] > The selectors #header and div#header can never refer to two different > elements. ... Now let me "Yucca parse" that: "The selectors #header and div#header can never refer to two different elements" but when someone other than Yucca says they refer to the same element, that's "wrong" because they don't "always." Well that clears things up. > ...In any given document, they either refer to the same element, > or one of them refers to an element and the other does not, or neither [quoted text clipped - 3 lines] > document may refer to different elements. That's either grossly > self-evident or wrong, depending on what you mean by that. Please explain to me what you mean? I thought if it's wrong, it's wrong, and if its "grossly self-evident" it's usually not wrong. My sites usually have more than one document. You are free to change how you do headers on each and every document, but I don't. Having one document with div id="header", one with h1 id="header", one with p id="header", is more confusing to me than your rigid mental myopia. > You have just managed to confuse people with your explanations, probably > mostly yourself. Why is it that you are always sure of what people are thinking, but never seem to understand what they are trying to say. Granted, us mere mortals, are often not as clear as we think we are, but I frequently read what you "explain" and if I didn't already know what you "meant" I would never glean it from your post. Try adding to your rude vocabulary. Phrases like "Did you mean to imply" , or "Are you saying..." "... if so that's incorrect" might be so much better than just assuming the worst and blasting someone for failing to live up to some unpublished Yucca imposed standard. You have an amazing grasp of facts, but an uncanny ability to be blinded and so narrowly focused by them that nothing else seems to matter. I truly believe that your confusion is self imposed, and deliberate. You tend to assume the worst possible connotation. If someone isn't explicit enough, you assume they haven't the foggiest clue. If they over explain, they are stating the "grossly self-evident" or a "rather trivial fact." Your conjectures are either based on ignorance, or they are calculated. I will give you the benefit of the doubt, something you should try sometime. You need to get away from your keyboard and mingle with the species more, and since you are so fond of recommending that people study up before they attempt things, see if you can find a good book on human sociability. For my part, I will strive to parse every syllable to insure that you cannot deliberately misinterpret them. > I have no idea of what point you are trying to make,... Why am I not surprised? > and specificity has > nothing to do with the rather trivial fact that div#header refers to the > div element with id="header", if it exists. Now it's trivial? I thought you were saying it DIDN'T refer to the div element with id="header?" >>> No, on any page that has an id="header" attribute in any element that >>> is not a div element, #header refers to that element whereas [quoted text clipped - 6 lines] > point that I made and that proves that you were wrong in saying that > #header and div#header can refer to two different elements. You are the one who said "div#header does not refer to any element" and you already demonstrated that they CAN refer to different elements in DIFFERENT documents. Re reading your quote for the um-teenth time I think the point you TRIED to make was "When a document contains an element other than a div with the id "header", div#header does not refer to THAT element, and since there can only be one id="header" in that document, div#header does not refer to ANY element IN THAT DOCUMENT." You should be more clear, so us farther down on the evolutionary scale can benefit from your wisdom. Of course I could "Yucca parse" everything you post and when I find something that could POSSIBLY be misinterpreted, I could point out how it invalidates your whole argument. Or I could inject things like "refers to all", as you have done, to see if that disqualifies your statement. I usually try to keep things in the original context, but if you like I can adopt your "conveniently changing context" approach that renders all things wrong at some point. >>> That's not a naming convention. That's a matter of using selectors. >> [quoted text clipped - 3 lines] > You can use them in any case (though they might refer to no elements). > This has nothing to do with naming conventions. Isn't that grossly self-evident? > It depends on how you use CSS as a whole. As already explained, the > selectors have different specificity. Now it is I who has "no idea of what point you are trying to make>" Scripsit William Gill: > Now let me "Yucca parse" that: > "The selectors #header and div#header can never refer to two > different elements" but when someone other than Yucca says they > refer to the same element, that's "wrong" because they don't > "always." > Well that clears things up. Yes, this clarifies that you don't understand the issue. That's OK, but why do you keep trying to explain something about it when you are so confused, as well as keep misrepresenting what others have tried to explain to you? I'll try to type this in as slowly as I can: They may refer to the same element, but this does not mean that they mean the same thing. You probably don't understand this, because you don't understand the CSS cascade. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit William Gill: > [quoted text clipped - 7 lines] > They may refer to the same element, but this does not mean that they > mean the same thing. ... Please show me where I said they were the same thing, or where I misrepresent anything anyone has said, so that I may issue the appropriate mea culpa's. Yes, I was trying to use them to accomplish the same purpose, i.e. to target a <div>identified as "header", not an <h1>, or a <p>, or anything else. You still haven't said why that won't work, or why it's not a good idea to do it that way. I take that back, you did give some considerations why that would make things more difficult. You have made it abundantly clear that div#header wouldn't target <h1 id="header">. I'm sorry I don't know how else to tell you I do know that. And before you point it out, I know that div#someotherid will not target my <div id="header"> either. > ...You probably don't understand this, because you > don't understand the CSS cascade. I am sure I don't understand it as well as you. It's too bad there isn't a newsgroup where I can ask questions about it. :-) > Scripsit William Gill: >> If I have a style sheet with both div#header and #header, the first >> (more specific) will style only pages containing <div id="header">. > > I have no idea of what point you are trying to make, and specificity has > nothing to do with the rather trivial fact that div#header refers to the > div element with id="header", if it exists. A couple days later, with more sleep, and under a banner of truce :-) If I use the selector #header, it will match any any element that is identified as "header". If, however I employ the selector div#header it only matches the div element identified as "header", thus it is more specific. My understanding of CSS specificity is that it is the arbitration used to be used between competing rules. Absent any conflict, specificity is meaningless. Are these either semantically, or otherwise incorrect? William Gill : > If I use the selector #header, it will match any any element that is > identified as "header". Quite, but there should be at most one in your document, so the "any" part is a bit misleading. It is like saying, e.g., "Any URL which is identical to http://www.w3c.org/ points to the web site of the World Wide Web Consortium". SignatureJohannes "Quand on dit c'est un Johannes, cela vaut autant que ce que maintenant on appelle un pédant" (H. Estienne, in É. Littré, /Dictionnaire de la langue française/, art. PÉDANT) > Quite, but there should be at most one in your document, so the "any" part > is a bit misleading. It is like saying, e.g., "Any URL which is identical > to http://www.w3c.org/ points to the web site of the World Wide Web > Consortium". A and by using "any any" it's even more misleading. :-) I was taking ID uniqueness as a given, but you are right. Is this any clearer? "If I use the selector #header, it will match an element of any type that has been identified as "header", if one exists." William Gill : > Is this any clearer? > "If I use the selector #header, it will match an element of any type > that has been identified as "header", if one exists." Much clearer :-) I was wondering if you were somehow trying to distinguish between different types of elements with the same id attribute in the same document. That would have been silly, of course, but I have seen worse questions asked. Anyway, as I understand the specs, div#x is more specific than #x, so it wins in the rather unlikely case one would bother to write both. Specifically :-), "#x" would have a specificity of a=0 b=1 c=0 d=0 -> 0,1,0,0 while "div#x" would have a specificity of a=0 b=1 c=0 d=1 -> 0,1,0,1 (http://www.w3.org/TR/CSS21/cascade.html#specificity) SignatureJohannes "Quand on dit c'est un Johannes, cela vaut autant que ce que maintenant on appelle un pédant" (H. Estienne, in É. Littré, /Dictionnaire de la langue française/, art. PÉDANT) > William Gill : > I was wondering if you were somehow trying to distinguish between > different types of elements with the same id attribute in the same > document. That would have been silly, of course, but I have seen worse > questions asked. Not as silly as you might think. Earlier in this this thread, because I was thinking, but not stating "one stylesheet for many documents", I gave the impression I was unaware that an id must be unique in each document. Though I think it would be bad practice, the same id could be applied to different elements in different documents throughout the site. Because we were thinking in different scopes (single document vs. site wide) It caused a major inability to communicate. > Anyway, as I understand the specs, div#x is more specific than #x, so it > wins in the rather unlikely case one would bother to write both. Just for discussion, let's say you had a div with an id of xx in some documents, and h1 elements with an id of xx in others, and for some reason you want to style the h1's different than the div's. Common properties would go in the #xx section, and the variation in div#xx. > Specifically :-), "#x" would have a specificity of a=0 b=1 c=0 d=0 -> > 0,1,0,0 while "div#x" would have a specificity of a=0 b=1 c=0 d=1 -> > 0,1,0,1 (http://www.w3.org/TR/CSS21/cascade.html#specificity) I'm glad you gave me the chance to check my arithmetic. I came up with 100 and 101 also. Unfortunately, because of the previously mentioned misunderstandings, I could never get a clear answer on what penalty, or unintended consequence (the specificity value being a benefit) I would suffer using div#xx as opposed to using #xx for my divs. > Scripsit William Gill: > [quoted text clipped - 9 lines] > not a div element, #header refers to that element whereas div#header > does not refer to any element. So basically if you always apply the ID "header" to a DIV then the is really no difference is using div#header over #header in your stylesheet except your have to type 3 more characters. However the disadvantage is in flexibility if you should ever decide to apply the style to a different element in your markup... SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com Scripsit Jonathan N. Little: > So basically if you always apply the ID "header" to a DIV then the is > really no difference is using div#header over #header in your > stylesheet except your have to type 3 more characters. There is, because div#header is more specific than #header, in terms of specificity of selectors as defined in CSS. Quite often this does not matter, but when it does, the author is surely confused if he has learned to think that there is no difference. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit Jonathan N. Little: > [quoted text clipped - 6 lines] > matter, but when it does, the author is surely confused if he has > learned to think that there is no difference. Technically yes, but since this is concerns an ID and there can only be one ID per page, the specificity of the rule for the div whether div#header or #header, this #header will still trumps other non ID rule right? Its where class and element selectors are involved... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>ID trumphs</title> <style type="text/css"> div { color: blue; } div.withclass { color: green; } #withid { color: red; } </style> </head> <body> <div>Plain</div> <div class="withclass">With Class</div> <div class="withclass" id="withid">With Class and ID</div> </body> </html> or if you had a rule conflict: #withid { color: red; } div#withid { color: blue; } <div id="withid">Would be blue not red</div> SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com Scripsit Jonathan N. Little: >> Scripsit Jonathan N. Little: >> [quoted text clipped - 11 lines] > div#header or #header, this #header will still trumps other non ID > rule right? There's a predicate (verb) missing from the "the specificity of the rule - -" sentence, so I don't quite understand what you mean, but you're wrong anyway. :-) > Its where class and element selectors are involved... Let's not confuse the issue with other types of selectors. > or if you had a rule conflict: > #withid { color: red; } > div#withid { color: blue; } Then what? Do you mean that specificity only matters when there is a rule conflict? Indeed. That's the situation for which specificity has been defined. In your example, the color would be blue even if the latter selector were #withid, since other things being equal, the latter rule wins. If we change the order in the example, i.e. div#withid { color: blue; } #withid { color: red; } then it matters whether we have div#withid or #withid. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit Jonathan N. Little: > [quoted text clipped - 17 lines] > - -" sentence, so I don't quite understand what you mean, but you're > wrong anyway. :-) Good thing English is my second language! :-D Technically yes, but since this concerns an ID and there can only be one ID per page, the specificity of the rule for the div whether div#header or #header will still trumps other non ID rule right? >> Its where class and element selectors are involved... > [quoted text clipped - 16 lines] > > then it matters whether we have div#withid or #withid. I guess the point I was clumsily trying to make was that ID rules have such high specificity over other selector rules that the difference with div#withid or #withid would typically matter with rule conflict IF you only used the "withid" on DIVs. If you chose to use that ID on another element type then it would limit your flexibility to apply that stylesheet to that document. I personally would use #withid and would only preface with the element type if the rule contained a property that related specifically to that element. e.g., ul#withid { list-style: none; } #withid { color: red; background-color: white; } SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > I guess the point I was clumsily trying to make was that ID rules have > such high specificity over other selector rules that the difference with [quoted text clipped - 9 lines] > ul#withid { list-style: none; } > #withid { color: red; background-color: white; } Thank you Jonathan, and what I was trying to make figure out was, if I willingly sacrifice that flexibility in order to give myself a crutch (i.e. a reminder of the element the style was being applied to), what other unintended consequence might I create. Unfortunately, my clumsy attempt led people to assume I was ignorant of the proper use of the id attribute, so they were more concerned about protecting me from my own ignorance. I honestly don't blame them, I'm sure they are unaware of the ramifications of living with a closed head injury, but their inability to even consider that someone might have to approach things differently, is extremely frustrating. No matter how slowly they type. If you can imagine living your life speaking say Finish, and how difficult it would be to learn to "think" in a new language, say English, then you might have an inkling of what it would be like to wake up and have to relearn everything you know in a very foreign context. >> I personally would use #withid and would only preface with the element >> type if the rule contained a property that related specifically to [quoted text clipped - 7 lines] > (i.e. a reminder of the element the style was being applied to), what > other unintended consequence might I create. Well I would say as a "crutch" use a comment! I believe in comments, a create tool from programming background. Even if you will be the only one maintaining code of any sort, a comment can save countless hours of head-scratching when your need to fix or update many months|years down the road. /* outer DIV for formating the main page content */ #wrapper {... SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > Well I would say as a "crutch" use a comment! You have no idea how hard I'm laughing (at myself again). I believe in comments too. Sometimes I'm a real "can't see the forest" kind of guy. Now you know why I can't work when I'm tired. > Scripsit Jonathan N. Little: > >>> Scripsit Jonathan N. Little: > In your example, the color would be blue even if the latter selector > were #withid, since other things being equal, the latter rule wins. If [quoted text clipped - 4 lines] > > then it matters whether we have div#withid or #withid. OK, I have read this enough times to get a headache. My understanding of specificity is: #withid { color: blue; } #withid { color: red; } Result in red, because both calculate to the same specificity weight, and "last heard from wins." Order matters. div#withid { color: blue; } #withid { color: red; } Results in blue because the specificity value of div#withid is greater than the specificity value of #withid Order doesn't matter. Is that what you are saying? >> Scripsit William Gill: >> [quoted text clipped - 3 lines] > in flexibility if you should ever decide to apply the style to a > different element in your markup... Actually I view that as the rationale for choosing id instead of class. When I know I may need the flexibility to apply a style to various elements, I use a class. When I want to style a unique entity I use id. I do recognize that if I have a uniquely identified entity, such as <h1 id="header"> and I later need to change that entity to a div, it will take more work. Seeing the hint of the structure in the stylesheet helps me visualize what I'm styling. >> The do not necessarily apply to the same target. Without specifying >> 'div', the style could be applied to any tag with id="header" >> (though, of course, there must be only one in a single page). > > So, like I said, they refer to the same target (on any given page.) :-) Based on other replies in this thread, I realize my response wasn't clear, and my response should have been bracketed in <humor howfunny="notvery"> </humor> or more appropriately <flip> </flip>. I apologize. I was simply agreeing that since (per specification) id's must be unique, whether I used the convention div#header or #header, they WOULD be referring to the same target. > I find > myself using selectors like div#header instead of just #header. I know > that div#header and #header both refer to the same target, I'd strongly recommend using div.header You can use an id attribute, but use a class attribute too, and use the class in the CSS selector, not the id. The reason is this: Study the rules for CSS selectors and the cascade and you'll sse that an id-based has much stronger specificity than one based on a class. This means that any CSS using #header (with or without the div) is pretty inflexible to use, if the "header" element is a broad container element with lots of children that you might wish to style. The problem is (as illustrated by the snippet below) is that if you use an id-based selector to select a set of elements (children of the id'ed element) with a particular set of properties, then you can't sub- class within this set by using a more specific class attribute on particular children. If you use an overall _class_ instead of an id, then you can do this (and it's useful to do so). If the id'ed element won't have children that you wish to style, or if it's the id'ed element itself that you're after, then this is less important. But it stills works, so it's a reasonable general coding- style issue. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd" > <html lang="en" dir="ltr" ><head> <title>id vs. class specificity</title> <style type="text/css" > body { color: black; background-color: white; } #header * { background-color: lightblue; } .current { background-color: cyan; } .header2 * { background-color: lightgreen; } .current2 { background-color: teal; } </style> </head><body> <h2>Using <code>id</code></h2> <ul id="header" > <li >Foo</li> <li class="current" >Bar</li> <li >Bat</li> </ul> <h2>Using <code>class</code></h2> <ul class="header2" > <li >Foo</li> <li class="current2" >Bar</li> <li >Bat</li> </ul> </body></html> >> I find >> myself using selectors like div#header instead of just #header. I know [quoted text clipped - 4 lines] > You can use an id attribute, but use a class attribute too, and use > the class in the CSS selector, not the id. Agreed. I learned long ago to not use id's at all unless they are needed for scripting purposes or for page anchors, and always leave them out of the stylesheet. SignatureBerg >> I find >> myself using selectors like div#header instead of just #header. I know [quoted text clipped - 23 lines] > important. But it stills works, so it's a reasonable general coding- > style issue. My thinking was that I wanted to think of each id'ed block as a monolith (OOP), and that the specificity was basically moot under the specific circumstances. I see what you mean about sub classes. I hadn't thought about that. Oddly enough, I had previously avoided id's for some of the reasons you state. Not sure I remember why I thought the change would do me good :-) Using div.header still gives me the cue I need to "see" the object I'm styling. I was originally concerned about personal pitfalls using this coding style, but can't think of what they were at the moment. Not to beat a dead horse, but since having my brain re-wired, I have to do things much differently. Often too much flexibility can work against me, leading me to a tangle of disorganized conflicting junk. I will have to find a strategy that still provides the rigid discipline, without mucking up my CSS. Thanks, I will try this coding style, and if my perceived boogie man ever crops up I'll let you know. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.