CODEWITHSUNDEEP
csssyntaxgroupingcss-selectorspseudo-class
toms
toms

Reputation: 515

CSS - Grouping Selectors AND pseudo classes

I have a bunch of selectors i'm wanting to group, which is easily done this way:

.class1 #id1, .class2 #id2, .class3 #id3 { }

And I also want to apply psuedo classes on them.

But is there a way to group multiple selectors, AND multiple pseudo classes without repeating myself?

ie. I would like all the above elements, in either Link, Hover and Active states to have the same styling. Do I have to do it 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 better way?

EDIT:

I'd like to clarify my position. I have a list of links arranged something like this:

<div class="NAV">
 <a id="id1"></div>
 <a id="id2"></div>
 <a id="id3"></div>
 <a id="id4"></div>
</div>

but class NAV, is actually an interchangeable class name using <?php echo $current ?>

So my CSS reflects a scenario where NAV is either class1, class2, class3 OR class4 & one of the ids listed above are parent and child. eg. class1 > id1

So to create one style to reflect all scenarios I have to represent ALL scenarios and group them. I was hoping there was a way to at least group the pseudo classes separately so I don't have to create 3 times the amount of elements for each link state.

Upvotes: 0

Views: 2534

Answers (2)

Nojan
Nojan

Reputation: 913

As a general answer: Yes, you have to do this. There's no better way. because your elements have different parents.

But consider the markup below:

<div class="class1">
    <div id="id1">
        <div class="some-div"></div>
    </div>
    <div id="id2">
        <div class="some-div"></div>
    </div>
    <div id="id3">
        <div class="some-div"></div>
    </div>
</div>

In this case you can select the elements like this:

.class1 > div:hover {
    // your css rule...
}

And not effect div's with class some-div

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46559

You can give the affected elements a unique class of their own.

<div class="class1">
   <a id="id1" class="hoverable">xxx</a>
</div>
<div class="class2">
   <a id="id3" class="hoverable">xxx</a>
</div>
<div class="class3">
   <a id="id3" class="hoverable">xxx</a>
</div>

Then all you need for the CSS is

.hoverable:link, .hoverable:hover, .hoverable:active {}

Upvotes: 0

Related Questions