2

Bom, provavelmente vou levar votos negativos por essa pergunta, então vou tentar explicar o máximo possível, peço que tentem entender e se não conseguirem, por favor perguntem.

Situação

Tenho uma página .html e nela, tenho meu arquivo .css (usei style.css pra dar uma base na pergunta), nesse arquivo .css tenho minhas várias classes para todo o site, porém o problema vem quando preciso adicionar uma tabela de preço, mas essa tabela de preço tem varios elementos .css já existentes no arquivo .css e isso faz com que o layout simplesmente bugue.

Tá, mas o que quer?

Gostaria de saber se existe algum modo de colocar algum tipo de link rel focado em uma div só, se eu conseguisse fazer isso, poderia usar o próprio arquivo .css da tabela sem bugar nada no site pois iria carregar as classes da tabela separado.

Resumo

Preciso criar um tipo de link rel que funcione só pra uma div especifica.

O que já tentou?

Mudar os nomes de todas as classes, porém ela possuí algumas classes que (não sei se vão me entender) simplesmente não pode ser mudada.

Cara isso tudo tá confuso

Sim, eu sei, ta confuso até pra explicar, mas vamos lá mais uma vez, o arquivo .css da tabela, além de ser gigante, com centenas de classes, tem classes que são limpas, ou seja, form, a e sem prefixo. A forma mais fácil de colocar essa tabela seria incorporando um arquivo .css focado em uma div por exemplo div-prices.

Bom, é isso Peço desculpas pela confusão, tentei explicar da melhor forma, acredito que não tenha como fazer isso e que terei que me virar pra adicionar prefixos em todos os elementos, mas é sempre bom aprender mais não é mesmo?

Obrigado galera do Stack!

2
  • 1
    A pergunta é válida, mas a falta de códigos sim pode te causar uns downvotes. Commented 2/04/2016 às 16:48
  • Eu até pensei em colocar os códigos, porém a pergunta ia ficar extensa demais já que os códigos são grandes. Agradeço o conselho amigo Commented 4/04/2016 às 11:44

1 Resposta 1

3

Não precisa disso. Crie um seletor específico para a tabela, como um ID único e referencie todos os estilos da tabela a partir deste seletor.

Exemplo:

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

Bem, a partir do seletor ID no elemento-pai, você pode selecionar qualquer elemento da tabela e somente dentro dela, se quiser.

#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 */

1
  • Nossa, muito obrigado, coisa tão simples e eu quebrando a cabeça haha, valeu amigo agradeço a salvação. Commented 2/04/2016 às 16:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .