The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS #id.class or #id .class

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #30826

    I have been using CSS for a while and have been getting by nicely. But I have been really digging deeper and one issue is perplexing me. I understand the concept of using multiple selectors but what I don’t understand is why sometimes no space is required between the selectors. I use multiple selectors with spaces all the time but recently I have gone to the web for some styling help and have been directed to use selectors with no spaces. Can someone shed some light? Cheers!


    you wouldnt use an id and a class for hooking onto the same element. that would look like this and is wrong: #id.class

    but what you are asking is when to use the certain selectors.
    you can have

    im a message

    now to hook onto that you would go: div.message – correct

    or if it had a id instead of class:

    im a message

    div#message – correct

    you can also have


    now, to hook on or style this div you can only use one class, or one id per set of style rules

    like this:
    #message{color: red;}
    .box{font-size: 14px;}
    but not{…}

    and for the last bit

    something like this: #message .title{..}
    this is when there is another element with the class of title is inside the element with an id of message. that would look like this

    Im some random title

    i hope this helps you understand better


    I think @zack is incorrect, or I don’t understand what he is saying.

    Some text

    You can target that with the following CSS selectors:


    When there are no spaces, it means target an element that has X class/ID as well as X class/ID.

    Note: It is not valid CSS for an element to have more than one ID.
    Note: This method of selecting elements isn’t supported by IE6.


    Take a look at this and I think you’ll understand:

    body#page-home #topnav ul li

    What that’s basically saying is, “body with id of page-home which is a parent of element with id of topnav which is a parent of a ul which is a parent of an li which is a parent of a with a class of tn-home.”


    But why no space between the ‘a’ and the ‘.tn-home’?


    Because ‘tn-home’ is an attribute of ‘a’. ‘li’ is not an attribute of ‘ul’. Do you understand?


    Yeah, I think I was just confusing the way selectors were being written in the style sheets. I wasn’t grasping the fact that that you were attaching a selecting to a particular tag as opposed to grouping together a bunch of selectors. It all makes sense.
    Thanks for your patience!


    good luck

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.