Is there a more efficient way to target specific children of select parents in CSS without excessive repetition and lengthening the selector?
For instance, if I want to style the first-child paragraph within certain divs.
The current CSS method:
.funny > p:first-child, .sad > p:first-child {
color: red
}
Sample markup:
<div class="funny">
<p>This is red</p>
<p>This is whatever</p>
<p>This is whatever</p>
<p>This is whatever</p>
</div>
<div class="wildcrazy">
<p>This is whatever</p>
<p>This is whatever</p>
<p>This is whatever</p>
<p>This is whatever</p>
</div>
<div class="sad">
<p>This is red</p>
<p>This is whatever</p>
<p>This is whatever</p>
<p>This is whatever</p>
</div>
In reality, there could be various other first paragraphs in different divs that need styling, while some divs should not be targeted.
My inquiry is whether it's possible to declare the child element once alongside all its parent elements. Could the syntax look something like this?
.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3 > p:first-childInstead of repeating the selectors for each parent, such as:
.funny p:first, .sad p:first-child, .another_div_class0 p:first-child, .another_div_class1 p:first-child, .another_div_class2 p:first-child, .another_div_class3 p:first-child