id selectors; p#para1, what use of?

[guiderocksalt]

New to this....

If there can be only one unique id on a page, then what is the use of
this?:

From W3Schools ===========================
The style rule below will match the p element that has an id with a
value of "para1":

p#para1
{
text-align: center;
color: red
}
=========================================

para1 can only exist in one element... correct?

Thanks

 

[Els]

New to this....

If there can be only one unique id on a page, then what is the use of
this?:

From W3Schools ===========================
The style rule below will match the p element that has an id with a
value of "para1":

p#para1
{
text-align: center;
color: red
}
=========================================

para1 can only exist in one element... correct?

On that html page, yes.
But the stylesheet could also reference a div#para1 that is in the
html on a different page on the same site. Then #para1 would apply to
both the paragraph on one page, and the div on another. Adding the p
will prevent that.

For myself though, the reason to write p#para1 instead of just #para1,
would be that by looking at the stylesheet, I can instantly see that
it is a paragraph that's being referenced, not a div or a span or
anything else.

 

[dorayme]

<[email protected]

,

If there can be only one unique id on a page, then what is the use of
this?:

Good question. I use it for two purposes, quite different. To
identify a unique point in a page to link into from some menu
(that can be on the same page or a different page; as in a table
of contents and clicking takes you down to or to a particular
part of a page).

The other use is to simply remind myself that I have only one
particular element on the page that has a certain style. A class
will do as well. In fact I am tending to just use class now even
for this latter because it is simply doing more with less (a
design principle that has its advantages). There is no advantage
to the user of the website to use id for marking for stylistic
purposes.

 

[Toby A Inkster]

The style rule below will match the p element that has an id with a
value of "para1":

p#para1

As Els says, your stylesheet might have:

p#para1 { ... }
b#para1 { ... }
i#para1 { ... }

Yes, on any given page, only one of the above can exist; but multiple
pages are allowed to reference the same stylesheet, so perhaps on one page
there is a p#para1 and on another page there is a b#para1!

Also, you might have something like this:

div#highlighted, p#highlighted /* and other block elements */
{
padding: 0.67em;
background: yellow;
margin: 0.33em;
}
span#highlighted /* and other inline elements */
{
background: yellow;
text-decoration: underline;
}

And then on the page use a piece of Javascript to highlight specific
elements by setting the "id" attribute to "highlighted" and unsetting it
when you want the highlight to go (but making sure there are never two
elements with the same ID!)

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 12 days, 4:15.]

Sharing Music with Apple iTunes
http://tobyinkster.co.uk/blog/2007/11/28/itunes-sharing/