/ / SCSS / CSS Usando: no seleccionador solo para ciertos elementos - css, sass

SCSS / CSS que usa: no seleccionador solo para ciertos elementos - css, sass

Tengo un elemento común que contiene artículos, y quiero tratar a todos menos al primer hijo de la siguiente manera:

.listing{

article{

// Some styles
}

article:not(:first-child){

// Some more styles

}

}

Todo bien y bien. Sin embargo, en algunos listados todos deben tratarse de la misma manera, así que no quiero incluir el selector de artículos: no (: primer hijo), debe ser como el siguiente:

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

¿Cómo puedo combinar estas dos reglas sin repetir todo? Estoy seguro de que la respuesta es simple, simplemente no la veo.

Respuestas

0 para la respuesta № 1

Ok, creo que lo he descubierto usando Sass:

.listing{

article{
// Generic Styles
}

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

// More Styles

}
}

También veo que mi ejemplo de código original era un poco extraño, así que lo he actualizado para que sea un poco más correcto.


0 para la respuesta № 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;}

Demo actualizada