web-dev-qa-db-fra.com

css et/ou SASS + (frère) sélecteur vers le haut

En CSS, il n’ya aucun moyen de sélectionner un frère avec plus si le frère est au-dessus de la sortie, un élément précédent dans le code HTML.

Par exemple 

<div class="first">
<div class="second">

.second + .first { style applied to div.first}

Est-il possible de faire cela dans SASS/SCSS?

sass
30
petergus

SASS prend en charge tous les sélecteurs CSS3. Frère + est l'un d'entre eux. Mais cela n’apporte pas de fonctionnalités supplémentaires .

first {
  + second { 
     font-size: smaller;
  }
}

Mais vous ne pouvez pas impacter un parent avec ça ...

Ps: cela semble être une fonctionnalité de CSS4 :)

34
Xavier

Je connais le sentiment, c'est vraiment ennuyeux. J'ai trouvé un moyen rapide de le faire.

HTML:

<div class="mainmenu">
  <div class="subnav">
    <ul>
      <li>Whatever</li>
    </ul>
  </div>
</div>

-------->

SCSS:

// CSS est dirigé vers le premier enfant de div "mainmenu" avec le classe "subnav".

 .mainmenu{
      & > .subnav{
        // Child Selector SCSS HERE
      }
    }

====> thgaskell, vous m'avez prouvé le contraire :) Mon code fonctionne bien et j'ai perdu 6 Ko de mon code Minified! J'ai mis à jour le code comme comment le commentaire ci-dessous a été informé.

4
Neil

Peut ou peut ne pas être adapté à vos besoins, mais vous pouvez utiliser le sélecteur de frères et soeurs général dans Sass/CSS. Cela sélectionnera tous les éléments du même niveau de noeud (pas explicitement avant mais toujours pratique):

.second {
   .first ~ & {
       /* styles to be applied to .second if a .first exists at the same node level */   
   }
}
1
Ben Frain