Sign In/My Account | View Cart  
advertisement

Article:
CSS 3 Selectors
Subject: "Template" Selectors?
Date: 2003-06-19 16:17:54
From: Jonathan Block
First of all, thanks for the article. It's interesting to imagine how some of these selectors will be used in the future.


Now, a question:


I should probably already know this, but I haven't found a solution yet:


CSS is very good at allowing us to define a style which applies to every instance of an element (i.e. "p {color: blue;}"), then define further styles which refine details of particular instances of the same element (i.e. "p.special {color: orange;}").


This is good when I know that all of the settings I want to apply are descended from each other in a hierarchy which parallels that of the DOM tree.


But I've often found myself in the situation of manually recreating style settings for elements that are not so hierarchically connected. Using span elements for example, 90% of my document's span elements can get away with a single "span {font-family: sans-serif;}" definition, but the other 10% need over a dozen different style settings, each of which needs to apply a serif font. As I understand it, I'd have to define each of those styles independently (to cover the other variations between them), but include in each one the exact same font-family definition: "span.class_n {font-family: serif; ...}".


Is there a shorthand for this which involves less repetition? I imagined there'd be some sort of templating mechanism, something like "define myseriffont {font-family: serif; font-size: 12; ...} span.class_1 {myseriffont; ...} span.class_2 {myseriffont; ...}", but it wasn't there to be found when I went looking. Did I look in the wrong places? Has this sort of thing been suggested before and rejected for a particular reason?

Previous Message Previous Message   Next Message Next Message

Titles Only Titles Only Newest First
  • "Template" Selectors?
    2003-06-24 12:18:25 Peter Scott [Reply]

    If I correctly understand what you're talking about, I think that your problem has a solution so basic it isn't talked about much. Suppose that (as a contrived example) you want all your spans, unless specified otherwise, to have an ugly teal color. You also want to have some special classes of span, and you want them to be teal (or serif, or whatever) too. You would do something like this:

    
<html>
    
<head><title>Span sample</title>
    
<style type="text/css">
    
span { color: teal; font-family: serif;}
    
span.biggie { font-size: x-large; }
    
span.nonteal { color: red; }
    
</style>
    
</head><body>
    
<h1>Hello</h1>
    

    Hello, <span>This is a span</span>. Here is a <span class="biggie">different type of span</span>.

    

    <span class="nonteal">This span isn't teal.</span>

    
</body></html>

    This makes all spans teal unless you want them to be otherwise. This is, by the way, what CSS means by "Cascading": later definitions override earlier ones where they conflict, but nowhere else.

    • "Template" Selectors?
      2003-06-25 16:40:11 Jonathan Block [Reply]

      Alas, that's not quite what I'm getting at.


      I'm thinking rather of a 'style snippet' (i.e. a collection of text-formatting settings) that can be applied, in one brief statement, to any style definition anywhere in the tree.


      Perhaps such an ability wasn't developed because it doesn't fit within the 'cascading' concept.


      Maybe a better explanation would be to compare it to #define in C. Oversimplifying: Define one symbol to represent a collection of instructions at the top of the file, and use that symbol anywhere below. When the interpreter (compiler) reaches an instance of the symbol, it sees the instructions that symbol represents. That (or something similar) is what I want to do here.

    • Call javascript function from inside a css class...
      2003-06-24 23:08:07 Stephane Clinckart [Reply]

      Hi,


      I want to define and implement function in my css classes.


      --> So, if I want to change the functionnality, or add some new functionality, I can do from the .css


      The only way I find to do this is :


      <style>
      a.button5 {background-image:url("button_off.gif");}
      a.button5:hover {background-image:url("javascript:alert(this);")}
      </style>
      </head>


      <body>
      <tr>
      <td>
      TEST
      </td>
      </tr>
      </body>


      Can I use another way to do it? Is there plan to implement this functionnality in a newer version of the css???


      Thanks a lot.


      Stephane Clinckart
      Email : Clinckar@eib.org


Sponsored By: