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

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.