CSS Define an element that can have one of many classes.

Question

I am trying to target an item that one of many classes can have. Isn't there an easier way to write the following example? I could not find the link, but there seems to be a more efficient option.

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

Answer 1

If you are talking about computing efficiency (i.e. browser performance), I suggest sticking with what you already have. Otherwise...

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

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

If you cannot guarantee that you need something more complex:

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

An explanation is offered here . If you find this syntax secret, then again I offer you what you already have as the simplest.

Alternatively, modify your HTML to include a generic class that you can choose from. This will allow you to simplify CSS even more of what you already have.

Answer 2

Try it -

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

Answer 3

No, there is no simpler way in simple CSS.

However, if your many classes are similar, you can do a fuzzy match, as shown below. *[class^="myTable"] { ... } .

Answer 4

You can use several classes in 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; }