CSS Selectores de nombre de clase


Ejemplo

El selector de nombre de clase selecciona todos los elementos con el nombre de la clase objetivo. Por ejemplo, el nombre de clase .warning seleccionaría el siguiente elemento <div> :

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

También puede combinar nombres de clase para orientar elementos más específicamente. Vamos a aprovechar el ejemplo anterior para mostrar una selección de clase más complicada.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

En este ejemplo, todos los elementos con la .warning clase tendrán un color azul, y elementos con el .important clase con tener un color anaranjado del texto, y todos los elementos que tienen tanto el .important y .warning nombre de la clase tendrán un texto de color rojo color.

Tenga en cuenta que dentro de la CSS, la declaración .warning.important no tenía ningún espacio entre los dos nombres de clase. Esto significa que solo encontrará elementos que contengan la warning ambos nombres de clase y que sean important en su atributo de class . Esos nombres de clase podrían estar en cualquier orden en el elemento.

Si se incluyera un espacio entre las dos clases en la declaración de CSS, solo seleccionaría elementos que tengan elementos primarios con nombres de clase .warning y elementos secundarios con nombres de clase .important .