CSS file Only for a DIV, Is it possible?

Question

Well, I’m probably going to take a negative vote on that question, so I’m going to try to explain as much as possible, ask you to try to understand and if you can’t, please ask.

Situation

I have a page .html and in it, I have my file .css (I used style.css to base the question), in that file .css I have my various classes for the whole site, but the problem comes when I need to add a price list, but this price list has several elements .css already existing in the archive .css and this makes the layout simply buggy.

Yeah, but what do you want?

I wonder if there’s any way to put some kind of link rel focused on a single div, if I could do that, I could use the file itself .css table without bugging anything on the site as it would load the classes from the separate table.

Summary

I need to create a kind of link rel that only works for a specific div.

What have you tried?

Changing the names of all classes, but she has some classes that (I don’t know if you’ll understand me) simply can’t be changed.

Man, this whole thing is messed up

Yes, I know, it’s confusing even to explain, but come on one more time, the file .css of the table, besides being giant, with hundreds of classes, has classes that are clean, ie, form, a and without a prefix. The easiest way to put this table would be to enter a file .css focused on a div for example div-prices.

Well, that’s it I apologize for the confusion, I tried to explain in the best way, I believe that there is no way to do this and that I will have to turn to add prefixes in all elements, but it is always good to learn more is not even?

Thank you guys from Stack!

Answer 1

You don’t need this. Create a table-specific selector, such as a ID single and reference all table styles from this selector.

Example:

<table id="tabela-preco">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço (em R$/kg)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Açúcar</td>
            <td> 1,80</td>
        </tr>
        <tr>
            <td>Arroz Tipo 1</td>
            <td> 10,00</td>
        </tr>
        <tr>
            <td>Feijão</td>
            <td> 4,50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2"> Consulta: 02/04/2016</th>
        </tr>
    </tfoot>
</table>

Well, from the dial ID in the parent element, you can select any table element and only within it if you want.

#tabela-preco {
    font-family: sans-serif;
}

#tabela-preco thead {
    font-weight: bold;
}

#tabela-preco thead tr th {
    background-color: #333;
    color: #fff;
}

/* mais formatacões para a tabela podem ser inseridas */