Prev: Italic fonts vs. Slanted letters
Next: Style sheet question: difference between div#score vs. #score
From: A. Deguza on 28 Mar 2010 22:50
Hello All:

I have been learning about the use style sheets to build web pages for
the past month or so.

I have now a few simple web pages for my nephew's soccer site that
work.
One of the things I came across at a different site's CSS puzzled me a
bit:

The page refers to an div ID of "scores". On the style sheet I see a
div#scores section.

Other divs refer to a section on the style sheet the way I learned:
CSS has #name, html has id="name".

Why have a "div" before "#name"?

Arturo
From: Chris F.A. Johnson on 28 Mar 2010 23:26
On 2010-03-29, A. Deguza wrote:
> Hello All:
>
> I have been learning about the use style sheets to build web pages for
> the past month or so.
>
> I have now a few simple web pages for my nephew's soccer site that
> work.
> One of the things I came across at a different site's CSS puzzled me a
> bit:
>
> The page refers to an div ID of "scores". On the style sheet I see a
> div#scores section.
>
> Other divs refer to a section on the style sheet the way I learned:
> CSS has #name, html has id="name".
>
> Why have a "div" before "#name"?

Often it is not necessary, but a stylesheet can be applied to more
than one page, and you might a <div id="scores"> in one page, and
a <ul id="scores"> in another.

--
Chris F.A. Johnson <http://cfajohnson.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
From: A. Deguza on 29 Mar 2010 00:11
On Mar 28, 8:26 pm, "Chris F.A. Johnson" <cfajohn...(a)gmail.com> wrote:
> On 2010-03-29, A. Deguza wrote:
>
>
>
> > Hello All:
>
> > I have been learning about the use style sheets to build web pages for
> > the past month or so.
>
> > I have now a few simple web pages for my nephew's soccer site that
> > work.
> > One of the things I came across at a different site's CSS puzzled me a
> > bit:
>
> > The page refers to an div ID of "scores". On the style sheet I see a
> > div#scores section.
>
> > Other divs refer to a section on the style sheet the way I learned:
> > CSS has #name, html has id="name".
>
> > Why have a "div" before "#name"?
>
>    Often it is not necessary, but a stylesheet can be applied to more
>    than one page, and you might a <div id="scores"> in one page, and
>    a <ul id="scores"> in another.
>
> --
>    Chris F.A. Johnson                          <http://cfajohnson.com>
>    ===================================================================
>    Author:
>    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
>    Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)

Thanks for your response Chris, but I may not have posed my question
properly.

In the CSS sheet I see:

div#scores {
position:relative;
width: 700px;
height:280px;
overflow:no;
}

In the html I see

<div id="scores">

What is the function of that "div" in "div#scores" in the CSS sheet?

Arturo

From: Chris F.A. Johnson on 29 Mar 2010 01:09
On 2010-03-29, A. Deguza wrote:
> On Mar 28, 8:26?pm, "Chris F.A. Johnson" <cfajohn...(a)gmail.com> wrote:
>> On 2010-03-29, A. Deguza wrote:
>>
>>
>>
>> > Hello All:
>>
>> > I have been learning about the use style sheets to build web pages for
>> > the past month or so.
>>
>> > I have now a few simple web pages for my nephew's soccer site that
>> > work.
>> > One of the things I came across at a different site's CSS puzzled me a
>> > bit:
>>
>> > The page refers to an div ID of "scores". On the style sheet I see a
>> > div#scores section.
>>
>> > Other divs refer to a section on the style sheet the way I learned:
>> > CSS has #name, html has id="name".
>>
>> > Why have a "div" before "#name"?
>>
>> ? ?Often it is not necessary, but a stylesheet can be applied to more
>> ? ?than one page, and you might a <div id="scores"> in one page, and
>> ? ?a <ul id="scores"> in another.
>
> Thanks for your response Chris, but I may not have posed my question
> properly.
>
> In the CSS sheet I see:
>
> div#scores {
> position:relative;
> width: 700px;
> height:280px;
> overflow:no;
> }
>
> In the html I see
>
><div id="scores">
>
> What is the function of that "div" in "div#scores" in the CSS sheet?

To distinguish it from "p#scores" or "ol#scores" in another HTML
page.

--
Chris F.A. Johnson <http://cfajohnson.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
From: Jukka K. Korpela on 29 Mar 2010 02:36
A. Deguza wrote:

> Thanks for your response Chris, but I may not have posed my question
> properly.

Well, you did not give a hint of the topic in the Subject line (all
questions in this group are supposed to be about style sheets), and you
started with irrelevant things, but the question itself was fairly clear:
"Why have a "div" before "#name"?"

On the other hand, this is a frequently asked question, and by reading the
group for a while or checking the past discussions, you would have found the
answer relatively fast (and would probably have learned that constructive
posting style does not quote entire messages, only the relevant parts).

> In the CSS sheet I see:
>
> div#scores {
> position:relative;
> width: 700px;
> height:280px;
> overflow:no;
> }

Even from that fragment, we can see that the author hasn't used the
available tools for checking that CSS code is at least formally correct. The
overflow property has four defined values: visible, hidden, scroll, auto.
This means that you should not expect other things in the style sheet to be
exemplary either.

> <div id="scores">
>
> What is the function of that "div" in "div#scores" in the CSS sheet?

Formally, it is part of a combined selector and thereby restricts the
selector to refer to div elements only. In a sense Chris is right in saying
that this means div#scores, unlike mere #scores, does not refer to an
element like <ol id="scores">. But this is probably an unexpected effect of
a mistake rather than planned feature.

More often, div#scores is used intentionally to give the selector higher
specificity. If you have
#scores { font-size: 80%; }
in one style sheet and
div#scores { font-size: 100%; }
then the latter "wins", no matter what the mutual order of the stylesheets
is.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 |  Next  |  Last
Pages: 1 2
Prev: Italic fonts vs. Slanted letters
Next: Style sheet question: difference between div#score vs. #score