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 № 1Ok, 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;}