When it comes to grouping selectors in CSS, there is an easy way to do it like this:
.class1 #id1, .class2 #id2, .class3 #id3 { }
Applying pseudo classes on these grouped selectors can be a bit repetitive.
Is there a method to group multiple selectors and multiple pseudo classes without repeating the code?
For example, I want all the elements mentioned above to have the same styling for Link, Hover, and Active states. Do I need to repeat the selectors like this?
.class1 #id1:link, .class2 #id2:link, .class3 #id3:link, .class1 #id1:hover, .class2 #id2:hover, .class3 #id3:hover, .class1 #id1:active, .class2 #id2:active, .class3 #id3:active {}
Or is there a more efficient way to achieve this?
EDIT:
To clarify further, I have a list of links structured as follows:
<div class="NAV">
<a id="id1"></div>
<a id="id2"></div>
<a id="id3"></div>
<a id="id4"></div>
</div>
The class NAV changes dynamically using <?php echo $current ?>
My CSS needs to handle different scenarios where NAV could be class1, class2, class3, or class4 and each ID acts as a parent or child element. For example, class1 > id1
I am looking for a way to group pseudo classes separately so I don't have to repeat the same selectors for each link state three times over.