web-dev-qa-db-fra.com

Sélectionnez uniquement les enfants directs de l'élément avec Sass

Disons que j'ai le code HTML suivant:

<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>

Et j'ai le SCSS suivant:

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 {
        }
    }
}

Maintenant, le problème que j'ai, c'est que les divs options et search représentent 33% pour cent de account, ce qui est logique comme je l'ai div {width: 33%}. Je sais que je peux sélectionner des éléments enfants directs avec:

header {
  > div {
  }
}

Mais cela n'aide pas même si je mets le > devant toutes les autres classes. Je sais aussi que je peux dire que la largeur doit être 0 ou quoi que ce soit de nouveau dans .account mais j'aimerais éviter cela.

csssass
19
SuperDJ

Essaye ça:

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

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

Retirez la largeur de div et appliquez-la uniquement sur les enfants directs. Laissez le repos tel quel. Voici rapide violon (supprimer .option et .search styles plus tard, c'est uniquement pour la visualisation).

Veuillez modifier votre question et mieux expliquer exactement ce que vous souhaitez réaliser.

30
Drops

Je ne suis pas certain de vous comprendre. Mais je pense que vous voulez une combinaison d'enfants directs et de pseudo-sélecteurs d'enfants, en pur CSS:

header > div:first-child {
}

Ou, pour le deuxième div:

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

Vous pouvez également utiliser le sélecteur not:

header > div:not(.account) {
}

pour exclure les div indésirables.

3
ryanpcmcquen