SCSS / CSS Použitie: nie je selektor iba pre určité prvky - css, sass

Mám spoločný prvok, ktorý obsahuje články, a chcem k všetkým, ale k prvému dieťaťu pristupovať odlišne nasledovne:

.listing{

article{

// Some styles
}

article:not(:first-child){

// Some more styles

}

}

Všetko dobre a dobre. Avšak na niektorých výpisoch by sa s nimi malo zaobchádzať rovnako, takže nechcem zahrnúť článok: nie (: prvé dieťa) selektor, musí to byť nasledovné:

.listing.alt{
article{
// Some styles
// Some more styles
}
}

Ako môžem spojiť tieto dve pravidlá bez toho, aby som všetko opakoval? Som si istý, že odpoveď je jednoduchá, ja ju jednoducho nevidím.

odpovede:

Ok, myslím, že som to vymyslel pomocou Sass:

.listing{

article{
// Generic Styles
}

&.alt article,
&:not(.alt) article:not(:first-child){

// More Styles

}
}

Tiež vidím, že môj pôvodný príklad kódu bol trochu divný, takže som ho „aktualizoval, takže je to trochu viac správne.

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

Aktualizované demo