Mam wspólny element, który zawiera artykuły i chcę inaczej traktować wszystkie oprócz pierwszego dziecka:
.listing{
article{
// Some styles
}
article:not(:first-child){
// Some more styles
}
}
Wszystko dobrze i dobrze. Jednak na niektórych listach wszyscy powinni być traktowani tak samo, więc nie chcę dodawać artykułu: nie (: first-child) selektor, musi to być następujące:
.listing.alt{
article{
// Some styles
// Some more styles
}
}
Jak mogę połączyć te dwie zasady bez powtarzania wszystkiego? Jestem pewien, że odpowiedź jest prosta, po prostu jej nie widzę.
Odpowiedzi:
0 dla odpowiedzi № 1Ok, myślę, że zrozumiałem to za pomocą Sass:
.listing{
article{
// Generic Styles
}
&.alt article,
&:not(.alt) article:not(:first-child){
// More Styles
}
}
Widzę również, że mój oryginalny przykład kodu był trochę dziwny, więc zaktualizowałem go, żeby był trochę bardziej poprawny.
0 dla odpowiedzi nr 2
HTML
<div class="listing">
<article>1</article>
<article>2</article>
<article>3</article>
</div>
<div class="listing alt">
<article>1</article>
<article>2</article>
<article>3</article>
</div>
CSS
.listing:not(.alt) article:not(:first-child) {color:gainsboro;}