CODEWITHSUNDEEP
htmlcsscss-selectors
Dmase05
Dmase05

Reputation: 1089

CSS Target an element that could have one of many classes

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

Upvotes: 4

Views: 137

Answers (4)

JSW189
JSW189

Reputation: 6325

You could use multiple classes in the tables that need underlined links.

HTML:

<table class="myTable1 ul_table">...</table>
<table class="myTable2 ul_table">...</table>
<table class="myTable3 ul_table">...</table>
<table class="myTable4 ul_table">...</table>

CSS:

.ul_table a {
    text-decoration: underline;
}

Upvotes: 1

BoltClock
BoltClock

Reputation: 723428

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.

Upvotes: 4

tuff
tuff

Reputation: 5153

No, there is not an easier way in plain CSS.

However if your many classes are all similar, you can do fuzzy matching like this *[class^="myTable"] { ... }.

Upvotes: 2

Zoltan Toth
Zoltan Toth

Reputation: 47657

Try -

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

Upvotes: 5

Related Questions