Multiple classes with barely the same name - html

Question

I've got a little question and it seems there's no place on the internet where I can find the answer except here :p
So I've got an html page with some tables. Thoses tables have lines (as usual :p), and in those lines they are some inputs.
I want to add a rule in my css file wich have an effect on all those lines. Those lines have an id that is barely the same semantic.
Here's my code :
<table>
<tr id="tr_creneau_1">
<td>
<input />
</td>
</tr>
<tr id="tr_creneau_2">
<td>
<input />
</td>
</tr>
</table>
<table>
<tr id="tr_logo_1">
<td>
<input />
</td>
</tr>
</table>
At the end I want a css rule who impact all the inputs in the tr_* lines.

Answer 1

You can try with:
tr[id^="tr_"] input
But this is a css 3 selector and it doesn't work on all browsers, alternatively you can simply use:
tr input
or add a class to every row with that id and match that class

Answer 2

You can try:
tr[id^="tr_"] { --your css here-- }
It will check all of the tr tags if their id starts with tr_.
If it doesn't need to be at the start of the id attribute, just somewhere random , you can use:
tr[id*="tr_"]
If above doesn't work I would suggest going for a class based approach.

Answer 3

You could always add a CSS class to each table row you wish to target. e.g.
<table>
<tr id="tr_creneau_1" class="style-me">
<td>
<input />
</td>
</tr>
<tr id="tr_creneau_2" class="style-me">
<td>
<input />
</td>
</tr>
<tr id="somethingElse">
no input, so no class needed
</tr>
</table>
Then style as so:
table .style-me input {
background-color: red;
}