Da der (X)HTML-Code eigentlich nie nur eine Ebene hat, ist es möglich die CSS-Definitionen entsprechend dem (X)HTML-Code zu verschachteln. Diese Verschachtelung ist beliebig weit nach „innen“ möglich. Dazu ein kleines Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-language" content="de" /> <title>TITEL</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Ein <span>teilweise kursiver</span>Header</h1> <div id="beispiel"> Das ist ein Text direkt im DIV-Element <p>Und dieser Text ist im P-Element innerhalb des DIV-Elements. <span>Und ein SPAN-Element im P-Element im DIV-Element.</span></p> </div> <p>Ein P-Element außerhalb des DIV-Elements - die CSS-Eigenschaft von vorher greift hier nicht.</p> </body> </html>
style.css:
h1 span { font-style: italic; } div#beispiel p { font-weight: bold; } div#beispiel p span { text-decoration: underline; }