RE: [css3] Suggestion: Selector variables or "synonyms"

Brad Kemper wrote:

> This is where I showed a constant to be called "navlink" being  
> created and having a selector sequence assigned to it:
> 
> > /* for long sequences of selectors that are used in multiple  
> > places: */
> > @constant navlink( #sidenav ul li a, #topnav ul li a )
> 
> 
> This is where I showed the just-created "navlink" being used within  
> rules, as a placeholder for typing out that long sequence each time:
> 
> > navlink:link, navlink:visited { color:black; background- 
> > color:yellow; }
> > navlink:hover { background-color:black; color:yellow; }
> > navlink:active { background-color:black; color:red; }
> >
> > So, in this syntax, "@constant' means you are defining
> > the constant. [...] For selectors, after  they are defined,
> > they are used as though they are just simple  selectors.
> 
> 
> Note that I am _not_ suggesting that "navlink" in the above example  
> is an ID selector having anything to do with an element with the ID  
> of "navlink" in any HTML document. It does not. I am using it only as  
> a placeholder for the two pieces of selector text, "#sidenav ul li a"  
> and "#topnav ul li a". So that in the three rules I created with  
> "link", "visited", hover", and "active" could be written in a much  
> shorter form, instead of as follows:
> 
> 	#sidenav ul li a:link,
> 	#topnav ul li a:link,
> 	#sidenav ul li a:visited,
> 	#topnav ul li a:visited { color:black; background-color:yellow; }
> 	#sidenav ul li a:hover,
> 	#topnav ul li a:hover { background-color:black; color:yellow; }
> 	#sidenav ul li a:active,
> 	#topnav ul li a:active { background-color:black; color:red; }


Now I am following, how about a combination. I seeing that navlink as a div and not an anchor.

@constant ???( nav, #sidenav, #topnav ) {

  ul {list-style: none;}
  li (float: left;} /* specificity 1.0.1 */ 
  a {display: block;}
  a:link, a:visited {color: black; background-color: yellow; }
  a:hover {background-color: black; color: yellow; }
  a:active { background-color:black; color:red; }

}


To overrule the list item, I would need a selector like this.

#sidenav ul li {}  /* specificity 1.0.2 */

since everything within the @contant will have a specificity 100 plus there own specificity on top.


Alan

http://css-class.com/

Received on Tuesday, 12 February 2008 20:13:50 UTC