Group ids for the same CSS functionality

Question

Group ids for the same CSS functionality

Navigation

#1 by (3 votes)

0

I have the following lines of code that do something similar:

label[for=nombre]{
    font-weight: bold;
}

label[for=capacidad]{
    font-weight: bold;
}

label[for=descripcion]{
    font-weight: bold;
}

Can the names of the "ids" be grouped in this case of the label for, all in oneself from CSS? Separated by commas?

css

asked by omaza1990 07.01.2018 в 21:52

source

1 answer

Give styles to two divs within a global div CSS Validate duplicate records (SQL SEREVER)

score 3 · Accepted Answer

Of course it's possible, have you tried it? Take care about the value that you assign to the attribute selector, it does not refer to the identifier of the element (ID), it refers to the value of the for attribute that coincidentally could be the same.

label[for=nombre],
label[for=capacidad],
label[for=descripcion]{
    font-weight: bold
}

<label for="nombre" id="lbl1">Nombre</label>
<label for="capacidad" id="lbl2">Capacidad</label>
<label for="descripcion" id="lbl3">Descripción</label>

If you are looking to refer to the identifier of the element (ID) you could specify the tag selector followed by the identifier, for example:

label#lbl1,
label#lbl2 {
    font-weight: bold
}

<label for="nombre" id="lbl1">Nombre</label>
<label for="capacidad" id="lbl2">Capacidad</label>
<label for="descripcion" id="lbl3">Descripción</label>

However, consider that it is not the best way to define style rules, I suggest creating a class that defines the style of the font that will use the labels that you require, the idea is to indicate to the element the class to use in place to indicate to the style the elements to affect, for example:

.label-style {
    font-weight: bold
}

<label for="nombre" class="label-style">Nombre</label>
<label for="capacidad">Capacidad</label>
<label for="descripcion" class="label-style">Descripción</label>