Multiple selectors

Hi,

Apologies in advance for a newbie question, but I'm trying to decipher
css stuff, I can't find a direct parallel in web tutorials, and I'm not
sure what to search on.

My problem is that I'm familiar with multiple selectors (and various
types of selectors) but what does it mean if they are arranged like
this? :

#tabbedbar.a1 div.tab ul li#a1,
#tabbedbar.a2 div.tab ul li#a2 {
border: none;
}

So the comma seperates the two selectors, but each one looks like quite
a mixture of classes and IDs to me? Seperated by spaces (or not, in
the case of "li#a1").

Can someone either explain, or point me towards a useful resource that
might help?

Thanks,

Tim

re: Multiple selectors

[color=blue]
> Can someone either explain, or point me towards a useful resource that
> might help?[/color]

Try to copy a rule and paste it here :
http://penguin.theopalgroup.com/cgi-...electoracle.py

re: Multiple selectors

Thank you very much - that's what I call service - quick and useful.

****
Selects any li element with an id attribute that equals a1 that is a
descendant of an ul element that is a descendant of a div element with
a class attribute that contains the word tab that is a descendant of
any element with an id attribute that equals tabbedbar and a class
attribute that contains the word a1
or
any li element with an id attribute that equals a2 that is a
descendant of an ul element that is a descendant of a div element with
a class attribute that contains the word tab that is a descendant of
any element with an id attribute that equals tabbedbar and a class
attribute that contains the word a2.
****
Now I just have to drink some coffee to speed my brain up a bit...

re: Multiple selectors

Biguana wrote:[color=blue]
> [...]
> My problem is that I'm familiar with multiple selectors (and various
> types of selectors) but what does it mean if they are arranged like
> this? :
>
> #tabbedbar.a1 div.tab ul li#a1,
> #tabbedbar.a2 div.tab ul li#a2 {
> border: none;
> }
>
> So the comma seperates the two selectors, but each one looks like quite
> a mixture of classes and IDs to me? Seperated by spaces (or not, in
> the case of "li#a1").[/color]

The first applies to a (the, actually, since IDs must be unique within a
resource) list item having ID "a1" contained inside an unordered list
contained inside a div of class "tab" contained inside an element having
ID "tabbedbar" if that element is also assigned class "a1".
[color=blue]
>
> Can someone either explain, or point me towards a useful resource that
> might help?[/color]

*The* reference: http://www.w3.org/TR/CSS2/selector.html

re: Multiple selectors

On 2005-12-22, Biguana <temp1999@yahoo.co.uk> wrote:[color=blue]
> Hi,
>
> Apologies in advance for a newbie question, but I'm trying to decipher
> css stuff, I can't find a direct parallel in web tutorials, and I'm not
> sure what to search on.
>
> My problem is that I'm familiar with multiple selectors (and various
> types of selectors) but what does it mean if they are arranged like
> this? :
>
> #tabbedbar.a1 div.tab ul li#a1,
> #tabbedbar.a2 div.tab ul li#a2 {
> border: none;
> }
>[/color]
[color=blue]
> So the comma seperates the two selectors, but each one looks like quite
> a mixture of classes and IDs to me? Seperated by spaces (or not, in
> the case of "li#a1").[/color]

space means descended from
# means id ==
.. means class constains
, means or this rule

so a <li id="a1"> in an <ul> in <div class="tab"> in somethng class="a1" id="tabbedbar"

or the same with a2 instead of a1

Bye.
Jasen

re: Multiple selectors

"Phil" <phil@blash.com> wrote in message
news:xdidnVQYmv-YKjfeRVnyuA@giganews.com...[color=blue]
>[color=green]
>> Can someone either explain, or point me towards a useful resource that
>> might help?[/color]
>
> Try to copy a rule and paste it here :
> http://penguin.theopalgroup.com/cgi-...electoracle.py[/color]

I canot understand the very poorly worded instructions on this page.
I had expected that it would explain each line of the rule.
Perhaps my expectation is wrong.
I inserted the following:-

..test {
text-align: right;
color: red;
margin: 1px 2px 3px 4px;
}

Can someone tell me what I am doing wrong?
Or explain the cryptic output.
TIA
Brian Tozer

re: Multiple selectors

Thu, 22 Dec 2005 15:23:56 +0100 from Phil <phil@blash.com>:[color=blue]
>[color=green]
> > Can someone either explain, or point me towards a useful resource that
> > might help?[/color]
>
> Try to copy a rule and paste it here :
> http://penguin.theopalgroup.com/cgi-...electoracle.py[/color]

There's a slightly different version of that page, with explanations,
at
http://gallery.theopalgroup.com/selectoracle/

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

re: Multiple selectors

Thanks to everyone who has helped here. My problem was that I wasn't
familiar with descendant selectors (I said I was a newbie). Once
Phil's link had given me the terminolology I had something to search
on, and have read through the following tutorial (which I found really
helpful, and more advanced that previous basic tutorials, although it
does start from the basics as well).

http://www.westciv.com/style_master/...ial/index.html

It's weird how you can use stuff for ages without having a "formal"
understanding of it...

Cheers,

Tim