1

Tinha este exemplo inicialmente:

css

#label1 {
    color: #FFFFFF;
    text-align:left;
    font-style: italic;
}

html

...
<table>  
  <tr>
        <td><label for="nome1" id="label1">Jogador 1</label></td>
        <td><input type="text" name="nome1" id="nome1"></td>
    </tr>
    <tr>
        <td><label for="nome2" id="label1">Jogador 2</label></td>
        <td><input type="text" name="nome2" ></td>
    </tr> 
    <tr>
        <td><label for="nome3" id="label1">Jogador 3</label></td>                            
        <td><input type="text" name="nome3" id="nome3" ></td>
        ...            
</table>

Naturalmente esbarrei-me na repetição dos ids apesar de funcionar. Para solucionar o problema alterei os id para label1, label2, label3 ...

#label1, label2, label3, label4 {
    color: #FFFFFF;
    text-align:left;
    font-style: italic;
}

Neste cenário, apenas o label mencionado em primeiro lugar (label1) sofre a formatação. O que estou a fazer errado neste cenário?

1 Resposta 1

1

Vc tem que colocar o # na frente de todos os ids no CSS. Para vc entender melho pq o seu CSS não funcionou eu escreve ele diferente, colocando um ID em cada linha, como sugere o próprio manual da Google por exemplo https://google.github.io/styleguide/htmlcssguide.html#Selector_and_Declaration_Separation:

#label1, 
#label2, 
#label3, 
#label4 {
    color: #FFFFFF;
    text-align:left;
    font-style: italic;
}

Agora fica mais fácil de vc notar a necessidade de coloca o kbd># na frente do nome de cada id Essa outra questão sobre ID pode te interessar tem várias coisas interessantes lá Por que é considerado errado/ruim repetir uma ID em HTML?


Agora sobre o que eu te sugiro e não usar o ID para colocar estilo em elementos. Eu te sugiro colocar classes, mesmo que o elemento já tenha um ID, pois IDs são únicos e como vc viu vc precisa declarar no CSS 4 ids para usar o mesmo estilo, e com a .classe vc só precisa de uma .classe que será aplicada nas labels. Aqui tem uma questão que tb vale a pena vc parar para ler, vai te ajudar pro resto da vida de dev: O que devo usar no CSS, id ou class?

Então vc teria algo assim:

.class-label {
    color: #FF0000;
    text-align:left;
    font-style: italic;
}
<table>
    <tr>
        <td><label class="class-label" for="nome1" id="label1">Jogador 1</label></td>
        <td><input type="text" name="nome1" id="nome1"></td>
    </tr>
    <tr>
        <td><label class="class-label" for="nome2" id="label1">Jogador 2</label></td>
        <td><input type="text" name="nome2"></td>
    </tr>
    <tr>
        <td><label class="class-label" for="nome3" id="label1">Jogador 3</label></td>
        <td><input type="text" name="nome3" id="nome3"></td>
        ...
</table>


DICA

Essa parte é apenas uma dica, apenas outros métodos para vc pegar todas as labels, mas já adianto que para usa-los vc precisa saber exatamente o que está fazendo ou pode ter problemas de hierarquia de classes, conflitos de classes, etc...

Essa definição no CSS pega todas as label que estão dentro de uma table

table label {
    color: #FF0000;
    text-align:left;
    font-style: italic;
}

Essa definição pega todas as label que tenho um atributo ID independente do nome do ID

label[id] {
    color: #ff0;
    text-align:left;
    font-style: italic;
}

E essa definição pega todas as labels do documento.

label {
    color: #ff0;
    text-align:left;
    font-style: italic;
}

Mas como falei, antes de sair usando o CSS dessa maneira leia o manual que citei no início da resposta, e leia tb os outros links, vão te ajudar muito. Sobre hierarquia de classes vc DEVE ler isso: Qual seletor css tem prioridade?

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 .