How to format all labels of a form with a style associated with an id?

Question

How to format all labels of a form with a style associated with an id?

Navigation

#1 by (1 votes)

1

I had this example initially:

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>

Of course I bumped into ids repetition despite running. To solve the problem I changed the ids for label1, label2, label3 ...

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

In this scenario, only the label mentioned first (label1) undergoes formatting. What am I doing wrong in this scenario?

html css

asked by anonymous 20.10.2018 / 11:59

1 answer

mysql select order by starting today's date Line break in a function

score 1 · Accepted Answer

You have to put # in front of all ids in CSS. For you to understand better because your CSS did not work I write it differently, putting a ID on each line, as suggested by the Google manual itself eg link :

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

Now it's easier to notice the need to put kbd in front of the name of each id This other question about ID might interest you has several interesting things there Why is it wrong / bad to repeat a HTML ID?

Now about what I suggest and do not use ID to put style into elements. I suggest you put classes , even if the element already has a ID , since IDs are unique and as you saw you need to declare in% 4 ids CSS to use the same style, and with .classe you only need a .classe that will be applied to labels . Here's a question that you're worth to stop reading, it'll help you for the rest of your dev's life: What should I use in CSS, id or class?

Then you would have something like this:

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

TIP

This part is just a hint, just other methods for you to get all the labels, but you should know that to use them you need to know exactly what you are doing or you may have problems with class hierarchy, class conflicts, etc. ...

This definition in CSS takes all label that is within a table

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

This setting takes all label that has an attribute ID independent of the name of ID

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

And this setting takes all labels of the document.

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

But as I said, before leaving using CSS in this way read the manual I quoted at the beginning of the answer, and read tb the other links, they will help you a lot. On class hierarchy you MUST read this: Which css selector takes priority?