id selector vs. contextual selector

[EdwardMartinIII]

Okay, I've been diggin' more thoroughly into stylesheets and I ran across these two beasts. As I understand, a contextual selector is denoted by a "." in front of it and can apply to any collection of elements (including n = 1):

.Centered {text-align: center;}

An id selector is denoted by a "#" and can apply to only a single element:

#Centered {text-align: center;}

Now, near as I can tell you can use a contextual selector anywhere you can use an ID selector. If that is so, why bother using ID selectors at all?

Curious,





Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[theboyhope]

A contextual selector lets you specify a selector by the context of an element in the document. An example would be a <p> with a class &quot;.test&quot; (<p class=&quot;test&quot;>). That would look like P.test { font-weight: bold; }

I think you've got them confused with class selectors which let you apply a selector by means of a repeatable class attribute.

Class selectors are repeatable; id selectors, AFAIK, are not (because IDs should be unique).

HTH.

 

[MrBelfry]

I tend to make the distinction between class and ID selectors based on the structure of my html doc. If I have a doc where I want to have three columns I normally use id to apply style rules to each of these columns (so I'd have three id's). I would then use class selectors to apply style to the individual elements within my columns.

Of course you may use id for scripting purposes as well.

MrBelfry

 

[clarkin]

AFAIK both are pretty much swappable, just avoid having multiple ids of the same value.
Also id = &quot;blah&quot; can be handy for client-side DOM - eg getElementById() ..

Have a look at

http://www.w3.org/TR/REC-CSS2/selector.html

(presume you already have..) and also this very useful tutorial

http://www.brainjar.com/css/using/

Enjoy

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[ChrisHunt]

Hmmm...
[ul]
[li]id can be useful in CSS positioning to identify which <div> is which: [tt]<div id=&quot;menu&quot;> <div id=&quot;content&quot;>[/tt] etc.[/li]
[li]ids can be searched for in Javascript like clarkin says[/li]
[li]Newer browsers (I believe) will treat [tt]<a id=&quot;top&quot;>[/tt] the same way as [tt]<a name=&quot;top&quot;>[/tt], i.e. you can point a link there like this: [tt]<a href=&quot;#top&quot;>Top</a>[/tt][/li]
[li]id is shorter to type![/li]
[/ul]
That said, I rarely use id in my pages, but then I don't use CSS positioning or fancy Javascript either!

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[EdwardMartinIII]

theboyhope: A contextual selector lets you specify a selector by the context of an element in the document. An example would be a <p> with a class &quot;.test&quot; (<p class=&quot;test&quot;>). That would look like P.test { font-weight: bold; }

Yeah, but the same thing would apply if I declared, in my style sheet,

#test {font-weight: bold}

As long as I apply it to only a single element. &quot;#&quot; seems to be one shot per page and only to one element, &quot;.&quot; can be fired as often as necessary and to any group of items, or a single element.

I think you've got them confused with class selectors which let you apply a selector by means of a repeatable class attribute.

Actually, I'm sure there must be some difference between the use of &quot;.&quot; and &quot;#&quot;, but the only difference I've been able to see clearly has been kinda' retarded: &quot;#&quot; denotes something that can only be used once, &quot;.&quot; allows you to reuse the class as often as you like. As if &quot;#&quot; usage came first, someone decided it was stupid to limit to n=1, then came up with class (contextual) selector &quot;.&quot; that allows reuse and expanded set of n.

&quot;Class selectors are repeatable; id selectors, AFAIK, are not (because IDs should be unique).&quot;

id selectors key off the declared ID of the element? Hm, that might be useful to know -- except that automatically limits them to occuring once per document, which is kinda scuzzy. It also seems to tie presentation a little more closely to content, but maybe there's something else I misunderstand...

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[theboyhope]

There is a difference between id selectors and class selectors - a big difference. Where did I say different?

Other than that, despite some confusion, you appear to be agreeing with me.

Oh, and #test isn't the same as
P.test.

 

[EdwardMartinIII]

You seem to be misunderstanding both my original and subsequent post.

You claim there's a difference, and from what I read, there does in fact, seem to be. But what is the nature of the difference and what is the purpose behind the difference?

This, I do not understand. (nor is rewording the w3c definitions helping me much, I'm afraid)

Anything else would just be repeating what I wrote above.

I've tried reading a few different references, including the reference at w3c, but the difference (I'm sure there's a big one that is completely opaque to me) escapes me.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[theboyhope]

Right, sorry for any misunderstanding up to this point.

What makes ID selectors useful is that an ID is used to uniquely identify its element. That is both the nature and the purpose.

HTH.

 

[EdwardMartinIII]

No worries! Sometimes I get down the wrong lane, too!

So, say I have some control:

<input type=&quot;button&quot; id=&quot;Sales3&quot; class=&quot;CompButton&quot; value=&quot;Pop!&quot;></input>
<input type=&quot;button&quot; id=&quot;Sales4&quot; class=&quot;CompButton&quot; value=&quot;Pop!&quot;></input>

and in my CSS, I declare

input.CompButton {width: 200px;}
#Sales4 {width: 100px;}

Then this means I can -- for whatever reason -- declare a style that will appear exactly once on a page (the ID selector: Sales4)?

Is it for those times when I want everything to be the same except for a single element?

I guess I'm not understanding the difference between the above and

<input type=&quot;button&quot; id=&quot;Sales3&quot; class=&quot;CompButton&quot; value=&quot;Pop!&quot;></input>
<input type=&quot;button&quot; id=&quot;Sales4&quot; class=&quot;CompButtonShort&quot; value=&quot;Pop!&quot;></input>

and in the CSS

input.CompButton {width: 200px;}
input.CompButtonShort {width: 100px;}

Because in the latter instance, should I choose to reuse that class on the page, I could.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[theboyhope]

The difference is really just in the way you've implemented it. It's no more complicated than that. As you've already noticed, you can achieve the same effect in different ways.

 

[clarkin]

As you have realised, class and id can both be used to do exactly the same thing - the only exception being that ids can only be used once per document.

One good reason for having both available to CSS is that you can set 1 id and 1 to n classes for each element. To use your example:

<input type=&quot;button&quot; id=&quot;Sales3&quot; class=&quot;buttonStyle&quot; value=&quot;Pop!&quot;></input>
<input type=&quot;button&quot; id=&quot;Sales4&quot; class=&quot;buttonStyle noPrint&quot; value=&quot;Pop!&quot;></input>
..[CSS]..
input.buttonStyle {width: 200px; color: blue;}
#Sales4 {color: red;}
@media print {
  .noPrint { visibility:hidden; display:none;}
}

In this example you can see i've used an id to specify specific one-element stuff, a general class for button styles, and a noPrint class to hide the button if the page is printed.

As an element can have multiple classes you can also match for specific sets of classes:

input.buttonStyle.noPrint {..}

Hope that's given you some food for thought!

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[EdwardMartinIII]

Ah. Hm. I will think on this further. Thanks!

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door