CODEWITHSUNDEEP
csscss-selectors
Vijay Jamadagni
Vijay Jamadagni

Reputation: 1

Combine 3 CSS selectors into one

There are 3 tables: #table1, #table2and #table3.

Is there a way to specify the style for all 3 table without the use of css class?

For instance, can we combine the following selectors:

#table1 tbody td a, #table2 tbody td a, #table3 tbody td a {
    /* rules here */
}

into something like:

(#table1, #table2, #table3) tbody td a {
    /* rules here */
}

Upvotes: 0

Views: 214

Answers (4)

robertc
robertc

Reputation: 75777

The way to do this in CSS will be the :any selector:

:any(#table1, #table2, #table3) tbody td a {
    color: red;   
}

This is currently experimental, and only supported in Firefox, Chrome/Opera and Safari. Since it's prefixed versions only this probably won't save you any typing over just listing the rules for each ID, as you need to have a rule for each prefix:

:-moz-any(#table1, #table2, #table3) tbody td a {
    color: red;   
}
:-webkit-any(#table1, #table2, #table3) tbody td a {
    color: red;   
}

Demo.

As BoltClock has pointed out in a comment, the current CSSWG proposal for this functionality is the :matches() pseudo-class, here's a nice article which explains the selector and also how to get the same results with Sass.

Upvotes: 1

Edward Fitzgerald
Edward Fitzgerald

Reputation: 46

You can comma separate selectors, but only the full selector so: #table1 tbody td a, #table2 tbody td a ... not(#table1, #table2, #table3) tbody td a.

Why not use a class though? If you're applying the same CSS to multiple tables, it's easier, and from a re-usability standpoint, it's way easier when you decide you need to add table 4 in six months.

Always design for what you might end up with, not what you currently have.

Upvotes: 0

damian
damian

Reputation: 5444

You could use an attribute selector:

[id^="table"] tbody td a {
   /* your code */
}

Upvotes: 4

BenM
BenM

Reputation: 53246

If it's essential to do this, you can use an attribute selector as follows:

[id^="table"] td a {

}

However, you're generally better off using a class definition for applying the same style to multiple elements. It is not only more performant, but scales better for future use, and means that your element IDs are protected.

For example, what if you wanted to add another element with the ID of table-view, now your CSS rule will be imported, and without using a more specific selector, or the dreaded !important statement, you're stuck with it!

Upvotes: 0

Related Questions