For the following generated HTML:
<div id="parent1">
<div class="child" />
</div>
<div id="parent2">
<div class="child" />
</div>
<div id="parent3">
<div class="child" />
</div>
I would like to select .child from #parent1 and #parent2 like:
#parent1 .child, #parent2 .child { Do stuff... }
However, this can become messy. Is it possible to select a group of parents like this?
(#parent1, #parent2) .child { Do stuff... }
Best How To :
Selectors L4 draft introduces :matches()
. It allows you to do
:matches(#parent1, #parent2) .child
Note it's an experimental feature, and browsers haven't implemented it yet. However, some support :-moz-any
or :-webkit-any
, which behave like :matches
.
:-moz-any(#parent1, #parent2) .child {
color: blue;
}
:-webkit-any(#parent1, #parent2) .child {
color: blue;
}
:matches(#parent1, #parent2) .child {
color: blue;
}
<div id="parent1">
<div class="child">Child</div>
</div>
<div id="parent2">
<div class="child">Child</div>
</div>
<div id="parent3">
<div class="child">Child</div>
</div>