CODEWITHSUNDEEP
csscss-selectors
DJL
DJL

Reputation: 2200

shortening complex css selectors

I am trying to shorten some css selectors for ease of reading for example:

.a>.c,.b>.c

I thought I had used parenthesis in the past to group the union before continuing with more selectors

(.a,.b)>.c

But it seems this is not valid css.

Did I dream that I have done this before or is there a simple way?

My primary concern is readability of the css rather than number of bytes, however that is another obvious advantage to shortening the selector as above.

Upvotes: 2

Views: 1443

Answers (2)

vsync
vsync

Reputation: 130175

You can use the :is pseudo selector to shorten selectors which are similar but with different combinations, so each selector inside the :is() is combined with what comes after the :is():

:is(.a, .b) > .c { color: red }
<div class='a'>
  <a class='c'>a > c</a>
</div>
<div class='b'>
  <a class='c'>b > c</a>
</div>
<div class='a'>
  <a class='b'>a > b</a>
</div>
<div class='c'>
  <a class='c'>c > c</a>
</div>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

Parenthesis aren't used like this in CSS. Please see the Selectors Level 3 W3C Recommendation.

If .c is only ever the child of .a and .b you can simply use:

.c { }

If .a and .b differ from .x (assuming .x has a .c child), you can give them a specific class or data-* attribute:

<div class="a t" <!-- or --> data-t><span class="c"></span></div>
<div class="b t" <!-- or --> data-t><span class="c"></span></div>
<div class="x"><span class="c"></span></div>

And style using:

.t > .c { }
/* Or */
[data-t] > .c { }

Otherwise, there's nothing greatly unreadable about what you already have. If you want to make it even easier to read, simply space it out a little and put each selector on a new line:

.a > .c,
.b > .c {
    ...
}

Upvotes: 4

Related Questions