#id.class or #id .class

[justsomeguy]

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!

[zack]

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

hello

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;}
or
.box{font-size: 14px;}
but not
#message.box{…}

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

[jamygolden]

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:

#example{}

#example.one{}

#example.two{}

#example.one.two{}

.one{}

.two{}

.one.two{}

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.

[soap]

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

body#page-home #topnav ul li a.tn-home

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

[justsomeguy]

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

[soap]

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

[justsomeguy]

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!

[soap]

good luck

[Author]

Posts