SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question on ID's

    Is there a difference between

    Code CSS:
    ul#navLeft {....
    Code HTML4Strict:
    <ul id="navLeft">.....

    and

    Code CSS:
    #navLeft {....
    Code HTML4Strict:
    <ul id="navLeft">...

    If not, why would you use the first one?

    Thank you!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you are using the same stylesheet across more than one page you may have id="navLeft" attached to a different tag on some of your pages. Where that is the case ul#navLeft will not have a match on those pages while #navLeft will.

    If you only use that id on ul tags then the two will be treated the same and so adding the ul to the front will just act as a reminder to you of what tag the id is supposed to be on when you add new pages.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply.

    So I could use the styling from #navLeft for a list on one page, a paragraph on another page, one sentence on a third page, etc...

    But ul#navLeft could only be used on one <ul> on each page. Am I understanding correctly?

    Could I use both on one <ul>, if both were in my stylesheet?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Eileen Dover View Post
    So I could use the styling from #navLeft for a list on one page, a paragraph on another page, one sentence on a third page, etc...

    But ul#navLeft could only be used on one <ul> on each page. Am I understanding correctly?
    Yes that is correct

    Quote Originally Posted by Eileen Dover View Post
    Could I use both on one <ul>, if both were in my stylesheet?
    Yes, you could but you'd be complicating your CSS a little unless the reason was because you wanted some styles to be applied to all #navLefts whilst you'd want other styles only applied to the ul version.

    Personally though, I wouldn't recommend this as it could make your stylesheet very confusing.

    I've also seen people use ul#navleft to make things easier to read but I always give CSS id's and classes names that will mean something in the context of the page so this shouldn't usually be necessary and I just stick to using the ID or class without the element in front.

    Hope that helps.

  5. #5
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also you have the specificity issue.

    Lets say you want all of your unordered lists to be red.
    Code CSS:
    ul {color: red;}

    Later on you decide that you want your left hand navigation to be blue
    Code CSS:
    ul#navleft {color: blue;}

    Also if you specify an element and an ID, it helps when you are reading through your CSS at a later date.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •