div#header vs. #header

[William Gill]

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?

[Chris F.A. Johnson]

On 2007-09-22, William Gill wrote:

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?

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.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[William Gill]

Chris F.A. Johnson wrote:

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 ...).

[Jukka K. Korpela]

Scripsit William Gill:

Chris F.A. Johnson wrote:

> 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.)
:-)

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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[William Gill]

Chris F.A. Johnson wrote:

> 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"</humoror 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.

[Jonathan N. Little]

Jukka K. Korpela wrote:

Scripsit William Gill:

>Chris F.A. Johnson wrote:

>> 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.)
:-)

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.

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jukka K. Korpela]

Scripsit William Gill:

Jukka K. Korpela wrote:

>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">...</h1to <div id="header"><h1>...</h1>...</divwhenever 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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Bergamot]

Andy Dingley wrote:

On 22 Sep, 19:16, William Gill <[e-mail]:

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

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.

--
Berg

[Jukka K. Korpela]

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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[William Gill]

Jukka K. Korpela wrote:

Scripsit William Gill:

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

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. :-)

[William Gill]

Jukka K. Korpela wrote:

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]

Jonathan N. Little wrote:

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.