File.CSS Only for a DIV, Is it possible?

Navigation
2

Well, I'll probably take negative votes for this question, so I'll try to explain as much as possible, please try to understand and if you can not, please ask.

Situation

I have a page .html and in it, I have my file .css (I used style.css to give a basis on the question) , in this file .css I have my various classes for all site, but the problem comes when I need to add a price table, but this price table has multiple .css elements already in the .css file and this makes the layout simply bug.

Okay, but what do you want?

I would like to know if there is any way to put some type of link rel focused on a single div, if I could do this, I could use the file .css of the table without bugging anything on the site because it would load the classes of the separate table.

Summary

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

What have you tried?

Change the names of all classes, but it has some classes that (I do not know if they will understand me) simply can not be changed.

Dude this is all confusing

Yes, I know, it's confusing to explain, but let's go again, the file .css of the table, besides being giant, with hundreds of classes, has classes that are clean, that is, co_de %, form and no prefix. The easiest way to put this table would be to embed a a file focused on a div eg .css .

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

Thank you Stack guys!

    
asked by anonymous 02.04.2016 / 18:31

1 answer

3

You do not need it. Create a specific selector for the table, such as a single ID , 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 ID selector in the parent element, you can select any element from the table 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 */
    
02.04.2016 / 18:46
I can not find the reason for FormatExcpetion Hide address bar on mobile devices