How to lessen CSS

Question

<div id="tt">test1</div>
    <div id="blabla">test2</div>
<div id="test">
    <div id="blabla">test3</div>
    <div id="tt">test4</div>
</div>
<style>
    #tt {color:blue;}
    #blabla {color:green;}
    #test #tt, #test #blabla etc... {color:red;}
</style>

Is there a way to avoid repeating #test?

Thanks ;)

Answer 1

For the particular example that was the question before it underwent major revisions:

* { color: red }

CSS is very much about context though. It isn't very good when dealing with hypotheticals that have little resemblance to the real code.

Answer 2

Depends on what you want to do. If you want all the text nodes to be red and the parent element is #test, then you just need #test {color:red}. If you need to be more specific, and give a color only for a child, then you can use .child {color:blue}, but if you want to color a child of #test, then you will need to specify the ancestor descendant, in other words #test .child {color:green}

---

Edit

Example according my comment http://jsbin.com/udoya3

Answer 3

Instead of using id here, you should use id and class. An id should be unique : one id, one element. Class aren't unique. A class can have more than one element.

<style>
    .tt,.t {color:red;}
</style>

<div class="tt">test1</div>
<div id="test">
    <div class="tt">test2</div>
</div>

Answer 4

#test, #t, #tt { color:red; }

is perfectly valid code.

an #id takes precedence over any other styling (ie a class) which can have adverse effects, but may also be desired.

what are you actually trying to do? save a few characters when writing your css?