id selectors; p#para1, what use of?

Discussion in 'HTML' started by guiderocksalt@yahoo.com, Dec 18, 2007.

  1. Guest

    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
     
    , Dec 18, 2007
    #1
    1. Advertising

  2. Els Guest

    wrote:

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

    --
    Els http://locusmeus.com/
     
    Els, Dec 18, 2007
    #2
    1. Advertising

  3. dorayme Guest

    In article
    <
    >,

    wrote:

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

    --
    dorayme
     
    dorayme, Dec 19, 2007
    #3
  4. guiderocksalt wrote:

    > 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/
     
    Toby A Inkster, Dec 19, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad

    IE on attribute selectors

    tshad, Nov 12, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    351
    tshad
    Nov 12, 2004
  2. Matt Beckwith

    Class and ID Selectors (CSS question)

    Matt Beckwith, Jul 12, 2003, in forum: HTML
    Replies:
    3
    Views:
    393
    David Dorward
    Jul 13, 2003
  3. Derek Clarkson
    Replies:
    3
    Views:
    396
    Derek Clarkson
    Nov 7, 2003
  4. kayodeok
    Replies:
    0
    Views:
    365
    kayodeok
    Dec 12, 2003
  5. Nik Coughin

    css - descendant selectors

    Nik Coughin, Jan 28, 2004, in forum: HTML
    Replies:
    2
    Views:
    402
    Alliss
    Jan 29, 2004
Loading...

Share This Page