मेरे पास एक सामान्य तत्व है जिसमें लेख शामिल हैं, और सभी का इलाज करना चाहते हैं, लेकिन पहला बच्चा इस प्रकार है:
.listing{
article{
// Some styles
}
article:not(:first-child){
// Some more styles
}
}
सब अच्छा और अच्छा। हालाँकि कुछ सूचियों पर उन सभी के साथ एक जैसा व्यवहार किया जाना चाहिए, इसलिए मैं इस लेख को शामिल नहीं करना चाहता: नहीं (: पहला बच्चा) चयनकर्ता, इसे निम्नलिखित की तरह होना चाहिए:
.listing.alt{
article{
// Some styles
// Some more styles
}
}
मैं सब कुछ दोहराए बिना इन दोनों नियमों को कैसे जोड़ सकता हूं? मुझे यकीन है कि उत्तर सरल है, मैं इसे नहीं देख रहा हूँ।
उत्तर:
जवाब के लिए 0 № 1ठीक है, मुझे लगता है कि मैं "Sass का उपयोग कर यह पता लगा लिया है:
.listing{
article{
// Generic Styles
}
&.alt article,
&:not(.alt) article:not(:first-child){
// More Styles
}
}
मैं यह भी देखता हूं कि मेरा मूल कोड उदाहरण थोड़ा अजीब था इसलिए मैंने इसे अपडेट किया है इसलिए यह थोड़ा और सही है।
जवाब के लिए 0 № 2
एचटीएमएल
<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>
सीएसएस
.listing:not(.alt) article:not(:first-child) {color:gainsboro;}