CSS Target an element that could have one of many classes

Question

I'm trying to target an element that could have one of many classes. Isn't there an easier way to write the following example? I haven't been able to find a reference, but it seems there should be a more efficient option.

.myTable1 a, .myTable2 a, .myTable3 a, .myTable4 a
{
    text-decoration: underline;
}

Answer 1

Try -

table[class^=myTable] a {
    text-decoration: underline;
}

Answer 2

If you're talking about computational efficiency (i.e. browser performance), then I suggest sticking with what you already have. Otherwise...

If you know the class attribute always starts with the substring myTable, you can just use an attribute selector:

[class^="myTable"] a
{
    text-decoration: underline;
}

If you can't guarantee that you need something that's a little more complex:

[class^="myTable"] a, [class*=" myTable"] a
{
    text-decoration: underline;
}

An explanation is offered here. If you find this syntax arcane, then I'll suggest again going with what you already have as it's the simplest.

Alternatively, modify your HTML to include a common class that you can select by. This will let you simplify your CSS even more from what you already have.