tutorials.de - Warum spricht dieser CSS-Befehl nicht an? (Hierarchie?!)

by SpiceLab

HTML

<header id="masthead" class="site-header" role="banner">
   <div class="header-wrap">
       <div class="container">
           <div class="row">
               <div></div>
               <div class="col-md-8 col-sm-4 col-xs-12">test</div>
           </div>
       </div>
    </div>
</header>
<!-- Doppelte IDs sind zwar nicht zulässig, aber zu Demozwecken drücken wir hier mal beide Augen zu ;-) -->
<header id="masthead" class="site-header not-home" role="banner">
   <div class="header-wrap">
       <div class="container">
           <div class="row">
               <div></div>
               <div class="col-md-8 col-sm-4 col-xs-12">test</div>
           </div>
       </div>
    </div>
</header>

CSS

#masthead .row > div:nth-of-type(2) {color:red}
#masthead.not-home .row > div:nth-of-type(2) {color:green}