CSS Target an element that could have one of many classes

css, css-selectors, html

Solution

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.

Problem

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; } ```

Original source

Related problems