Selezionare solo i bambini diretti da elemento con Sass

Question

Diciamo che ho il seguente codice HTML:

<header class="header"> 
    <div class="title"> 
     <h1>Home</h1> 
    </div> 

    <div class="logo"> 
     <img src="#" alt="Logo"> 
    </div> 

    <div class="account"> 
     <div class="options"> 
     </div> 

     <div class="search"> 
     </div> 
    </div> 
</header> 

E ho la seguente SCSS:

header { 
    height: 4.1rem; 

    div { 
     width: 33%; 
     float: left; 
     height: 4.1rem; 
     line-height: 4.1rem; 
     color: #fff; 

     &.title { 
      h1 { 
       font-weight: normal; 
       font-size: 3rem; 
       padding: 0; 
       margin: 0; 
      } 
     } 

     &.logo { 
      text-align: center; 
     } 

     &.account { 
     } 
    } 
} 

Ora il problema che ho è che div options e search sono il 33% percento di account che è logico come ho div {width: 33%}. So di poter selezionare elementi figli diretti con:

header { 
    > div { 
    } 
} 

Ma questo non aiuta, anche se ho messo il > Infront di tutte le altre classi. So anche che posso dire che la larghezza dovrebbe essere 0 o che mai più in .account ma vorrei impedirlo.

Answer 1

Prova questo:

... 
    & > div {width: 33%;} 

    div { 
     float: left; 
     height: 4.1rem; 
     line-height: 4.1rem; 
     color: #fff; 
     ... 

Estrarre larghezza div e applicarlo solo su figli diretti. Lascia riposare così com'è. Qui è veloce fiddle (rimuovi gli stili .option e .search in seguito, è solo per la visualizzazione).

Si prega di modificare la domanda e spiegare meglio cosa esattamente si vuole raggiungere.

Answer 2

Non sono sicuro di averti capito. Ma penso che si vuole una combinazione di bambini diretti e bambino pseudo selettori, in puro CSS:

header > div:first-child { 
} 

O, per il secondo div:

header > div:nth-child(2) { 
} 

si potrebbe anche utilizzare il selettore not:

header > div:not(.account) { 
} 

per escludere eventuali div indesiderate.