Wybierz tylko bezpośrednie dzieci z elementu z Sass

Question

Powiedzmy mam następujące 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> 

I mam następujący 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 { 
     } 
    } 
} 

Teraz problem, że mam to, że div options i search są 33% procentami z account, co jest logiczne, ponieważ mam div {width: 33%}. Wiem, że mogę wybrać bezpośrednie elementy podrzędne z:

header { 
    > div { 
    } 
} 

Ale to nie pomoże, nawet jeśli kładę > Infront wszystkich innych klas. Wiem też, że mogę powiedzieć, że szerokość powinna wynosić 0 lub co jeszcze raz w .account, ale chciałbym temu zapobiec.

Answer 1

Spróbuj tego:

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

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

Wyjąć szerokość div i zastosować go tylko na bezpośrednich dzieci. Zostaw resztę tak, jak jest. Oto szybkie fiddle (usuń style .option i .search później, tylko w celu wizualizacji).

Edytuj pytanie i lepiej wyjaśnij, co dokładnie chcesz osiągnąć.

Answer 2

Nie jestem pewien, że Cię rozumiem. Ale myślę, że chcesz kombinacji bezpośrednich dzieci i selektorów pseudo dziecka, w czystym CSS:

header > div:first-child { 
} 

Albo, drugi div:

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

Można też użyć selektora not:

header > div:not(.account) { 
} 

w celu wykluczenia niechcianych elementów div.