Limiting the scope of CSS rules

yet
10 Oct 2009

I have the following markup presenting a nested documented structure.
Obviously the one CSS rules applies to div.title elements.
Assuming that the rule should never apply to the element div.title element
within the div.l2 element...how would I do that? I know about the '>'
selector and to introduce unique classes like 'title-l1', 'title-l2'...etc.

But the structure is pretty generic and more complex and I would like
to keep the CSS as flexible as possible...any idea?

<html>
<head>
<style type="text/css">
.l1 .title {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<div class="l1">
<div class="title">title level 1</div>

<div class="l2">
<div class="title">title level 2</div>
</div>
<div class="l2">
<div class="title">title level 2</div>
</div>

</div>
</body>
</html>

mikeday
12 Oct 2009

Why not use ".l1 > .title"? Or if the rules are setting similar properties, you could just let them override:

.l1 .title { font-size: 20pt }
.l2 .title { font-size: 18pt }
.l3 .title { font-size: 16pt }
...

Forum › How do I...?

Limiting the scope of CSS rules