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

Asked

Viewed 171 times

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>

Naturally I bumped into the repetition of ids despite working. To solve the problem I changed the id to 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 I’m doing wrong in this scenario?

html css

1 answer

1


You have to put the # in front of all the ids in CSS. For you to understand better pq your CSS didn’t work I write it differently by putting a ID on each line, as suggested by Google’s own manual for example https://google.github.io/styleguide/htmlcssguide.html#Selector_and_Declaration_Separation: 

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

Now it is easier for you to notice the need to put kbd># in front of each name id That other question about ID may interest you have several interesting things there Why it is considered wrong/bad to repeat an HTML ID?

Now about what I suggest to you and not using the ID to put style in elements. I suggest you put classes, even if the element already has a ID, for IDs are unique and as you saw you need to declare in CSS 4 ids to use the same style, and with the .classe you only need one .classe which will be applied in labels. Here is a question that also worth you stop to read, will help you for the rest of dev’s life: What should I use in CSS, id or class?

Then you’d 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 Abels, but already I say that to use them you need to know exactly what you are doing or you may have class hierarchy problems, class conflicts, etc...

This CSS definition takes all label that are within a table

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

This definition takes all label that I have an attribute ID independent of the name of ID

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

And that definition takes all the labels of the document.

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

But as I said, before you go out using CSS in this way read the manual I mentioned at the beginning of the answer, and also read the other links, will help you a lot. About class hierarchy you MUST read this: Which css selector has priority?

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.