CODEWITHSUNDEEP
htmlcss
Edouard Moinard
Edouard Moinard

Reputation: 114

Multiple classes with barely the same name

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.

Upvotes: 1

Views: 104

Answers (3)

WickyNilliams
WickyNilliams

Reputation: 5308

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

Upvotes: 1

Leon Lucardie
Leon Lucardie

Reputation: 9730

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.

Upvotes: 1

mck89
mck89

Reputation: 19241

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

Upvotes: 2

Related Questions