ncyoung.com
context sensitive overrides in CSS (google this)
This entry is in the following categories:
CSS lets you specify a context for classes, so that a style declaration can be scoped to apply only within a containing element with a certain class.
A simple example is that you can format all anchors that are in table cells with the style declaration:
td a { style-stuff }
Another time this comes very much in handy is where you have code that generates output with classes assigned. If you want to be able to change the look of one aspect of that output while leaving the others the same, you can use the contextual approach outlined above. Declare the override to apply only to a specific context, then wrap the output in that context.
So the stylesheet gets:
.specialList .listHeader { special-header-style }
Then when you go to create output, you can wrap it in a span to create the context. Assuming a generateList() function that creates a list whose heading is of class listHeader, do this:
<span class="specialList">
<?=generateList()?>
</span>
Viola, this list has a header that looks different from all other lists generated from the same code. No changes to code, minimal changes to styles, no side effects.
Dated: 05/02/2003
|
|
|