How to lessen CSS

Tags: css

Problem :

<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 ;)

---

Solution :

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