Explicación detallada del selector de clase CSS

El selector de clase permite especificar estilos de manera independiente del elemento del documento.

Selector de clase CSS

El selector de clase permite especificar estilos de manera independiente del elemento del documento.

Este selector se puede usar solo o combinado con otros elementos.

Consejo:Sólo después de marcar adecuadamente el documento se pueden usar estos selectores, por lo que generalmente es necesario hacer algunos diseños y planes antes de usar estos dos selectores.

La forma más común de aplicar estilos sin considerar el elemento específico del diseño es usar el selector de clase.

Modificar el código HTML

Antes de usar el selector de clase, es necesario modificar la marca específica del documento para que el selector de clase funcione correctamente.

Para asociar el estilo del selector de clase con el elemento, es necesario especificar una clase con un valor apropiado. Vea el siguiente código HTML:

<h1 class="important">
Este encabezado es muy importante.
</h1>
<p class="important">
Este párrafo es muy importante.
</p>

En el código anterior, la clase de dos elementos se especifica como important: el primer título (elemento h1), el segundo párrafo (elemento p).

Sintaxis

Luego usamos la siguiente sintaxis para aplicar estilos a estos elementos clasificados, es decir, un punto (.) antes del nombre de la clase, seguido del selector de comodín:

*.important {color:red;}

Si solo desea seleccionar todos los elementos con el mismo nombre de clase, puede omitir el selector de comodín en el selector de clase, lo que no tiene ningún efecto negativo:

.important {color:red;}

Prueba por ti mismo

Combinación de selectores de elementos

Los selectores de clase pueden combinarse con selectores de elementos.

Por ejemplo, es posible que desee que solo los párrafos se muestren en texto rojo:

p.important {color:red;}

El selector ahora coincidirá con todos los elementos p que tengan la propiedad class con important, pero no coincidirá con otros tipos de elementos, independientemente de que tengan esta propiedad class. El selector p.important se interpreta como: "Todos los elementos p que tengan la propiedad class con importante". Porque el elemento h1 no es un párrafo, el selector de esta regla no coincide con él, por lo que el elemento h1 no se convertirá en texto rojo.

Si realmente desea especificar un estilo diferente para el elemento h1, puede usar el selector h1.important:

p.important {color:red;}
h1.important {color:blue;}

Prueba por ti mismo

Selector de múltiples clases CSS

En la sección anterior, tratamos el caso en el que el valor de class contiene una palabra. En HTML, un valor de class puede contener una lista de palabras, separadas por espacios. Por ejemplo, si desea marcar un elemento específico como importante (important) y de advertencia (warning), se puede escribir:

<p class="important warning">
Este párrafo es una advertencia muy importante.
</p>

El orden de estas palabras no importa, también se puede escribir warning important.

Suponemos que todos los elementos con la clase class importante son negritos, mientras que todos los elementos con la clase warning son itálicos, y todos los elementos que contienen tanto important como warning tienen un fondo plateado. Se puede escribir:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Prueba por ti mismo

Al unir dos selectores de clase, solo se puede seleccionarque contienen estas clasesde elementos (el orden de los nombres de clase no importa).

Si un selector de múltiples clases contiene un nombre de clase que no está en la lista de nombres de clase, la coincidencia fallará. Vea las reglas a continuación:

.important.urgent {background:silver;}

No es de extrañar que este selector solo coincida con los elementos p que contienen las palabras important y urgent en la propiedad class. Por lo tanto, si solo hay palabras important y warning en la propiedad class de un elemento p, no se puede coincidir. Sin embargo, puede coincidir con los siguientes elementos:

<p class="important urgent warning">
Este párrafo es una advertencia muy importante y urgente.
</p>

Prueba por ti mismo

Cuestión importante:En versiones anteriores a IE7, Internet Explorer de diferentes plataformas no puede manejar correctamente los selectores de múltiples clases.