div { min-height: 20px; width:20px; padding: 5px; border-style: dotted; border-width: 1px; } div div div div div div { background-color: blue; } div div div div div div div div>div>div>div { background-color: green; } div div div div div div div div div div div div div div { background-color: yellow; } .orange[data-attr="blah"] { background-color:orange; } .red[data-attr] { background-color:red; } #dad div { background-color:purple; } #a11 { background-color:black; }
Troy's specificity demo... <div id="a1"> <div id="a1"> <div id="a1"> <div id="a1"> <div id="a1"> <div id="a1"> <div id="a2"> <div id="a3"> <div id="a4"> <div id="a5"> <div id="a6"> <div id="a7"> <div id="a8"> <div id="a9"> <div id="dad" > <div id="a11" class="red orange" data-attr="blah"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>