[WSG] css syntax question

2004-10-02 Thread Brian Duchek 
Is there a syntax in CSS declarations which 'wraps' classes/ids in a
parent condition?  I'm not asking this very clearly, but the idea is
similar to the Javascript syntax...

with  {
...
}

The purpose being, I find myself writing a lot of statements like the below

#navigation p {...}
#navigation #tabs {...}
#navigation #tabs ul li a {...}

Isn't there an easier/more efficient way to apply the parent selector
#navigation to all the different groups?

#navigation {
 p {...}
 #tabs{...}
}

Does anyone know if the above works, or if it has any browser support holes? 

I only ask because I know the people on this list can chew up this
question and spit it out like no one else :-)

Thanks,
-- 
Brian Duchek
=-=-=-=-=-=-=-=
e: [EMAIL PROTECTED]
w: new.inquiline.com
=-=-=-=-=-=-=-=
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

Re: [WSG] css syntax question

2004-10-02 Thread Nick Gleitzman 
I've never seen such 'nesting' listed anywhere in any CSS how-to info, 
and I presume that (a) if it were possible, the technique would have 
been published, and (b) it hasn't been published because it doesn't 
work. Having said that, I haven't ever tested it, so I don't know for 
sure...

What you can do, though, is group selectors that have common 
declarations into one rule:

#nav p, #nav #tabs, #nav ul { property1: value-x ; property2: value-y ; 
property3: value-z ;}

and then add additional rules for declarations that are specific to 
individual IDs/classes (or which override the declarations in the 
grouped rule - the Cascade in CSS means that a later rule takes 
precedence over an earlier one):

#nav p { property4: value-a ; }
#nav #tabs { property2: value-b ; } /* overrides property2: value-y 
above */
#nav ul li a { property5: value-c ; }
...etc

HTH...
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, Oct 3, 2004, at 09:33 Australia/Sydney, Brian Duchek wrote:
Is there a syntax in CSS declarations which 'wraps' classes/ids in a
parent condition?  I'm not asking this very clearly, but the idea is
similar to the Javascript syntax...
with  {
...
}
The purpose being, I find myself writing a lot of statements like the 
below

#navigation p {...}
#navigation #tabs {...}
#navigation #tabs ul li a {...}
Isn't there an easier/more efficient way to apply the parent selector
#navigation to all the different groups?
#navigation {
 p {...}
 #tabs{...}
}
Does anyone know if the above works, or if it has any browser support 
holes?

I only ask because I know the people on this list can chew up this
question and spit it out like no one else :-)
Thanks,
--
Brian Duchek
=-=-=-=-=-=-=-=
e: [EMAIL PROTECTED]
w: new.inquiline.com
=-=-=-=-=-=-=-=
**
The discussion list for  http://webstandardsgroup.org/
 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**

Re: [WSG] css syntax question

2004-10-02 Thread Isabel Santos 
Brian:
Doesn't seem an easy task (I'm not a css master anyway), but I think you 
could use combinations of several selectors to accomplish what you want (not 
nesting it though).
Using descendent, child, adjacent and universal selectors,
(check http://www.websiteoptimization.com/speed/tweak/descendant/
and http://www.ddj.com/documents/s=2371/nam1011137554/index.html)
for instace, you could group rules like:

#navigation p + #tabs, *strong.someclass, diva:hover {...}
You can define a rule in a group such as this even if you do not intend it 
to be applyed to all the ocorrences of the object in the html source, since 
if you define a more especific rule for that object later you will get the 
rule applyed to it.

You can check if a rule will actually be applyed to the object you intend to 
calculating its specificity and cascading order 
(http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order ,
and http://www.w3.org/TR/REC-CSS2/cascade.html#specificity).

You can also give more than one class to an html element, like:
p id=desconhomepage class=description place clear/p
You can use the selectoracle 
(http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py)
to check on exactly what your code means if you get doubts when the grouping 
starts getting too complex.

You may find a lot of information about selectors in this links list:
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html
Of course you would have to deal with a poor browser support for some 
selectors.
Maybe a fat style sheet will be also (for the time being) a saffer one.

Isabel Santos
- Original Message - 
From: Brian Duchek [EMAIL PROTECTED]


Is there a syntax in CSS declarations which 'wraps' classes/ids in a 
parent condition?  I'm not asking this very clearly, but the idea is 
similar to the Javascript syntax...

with  {
...
}
The purpose being, I find myself writing a lot of statements like the 
below

#navigation p {...}
#navigation #tabs {...}
#navigation #tabs ul li a {...}
Isn't there an easier/more efficient way to apply the parent selector
#navigation to all the different groups?
#navigation {
p {...}
#tabs{...}
}
Does anyone know if the above works, or if it has any browser support 
holes?

I only ask because I know the people on this list can chew up this
question and spit it out like no one else :-)
Thanks,. 

**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**