Selector de clase

Supóngase que se nos plantea siguiente problema, donde quiere aplicarse un estilo CSS únicamente al primer párrafo. El código original es el siguiente:

<body>
<p>CSS permite definir los estilos de una página XHTML de forma sencilla.</p>
<p>Las posibilidades son múltiples</p>
<p>Y permite separar el contenido de la presentación</p>
</body>

El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos.

La solución consistiría en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla que se ha de aplicar:

<body>
<p class="destacado">CSS permite definir los estilos de una página XHTML de forma sencilla.</p>
<p>Las posibilidades son múltiples</p>
<p>Y permite separar el contenido de la presentación</p>
</body>

Posteriormente deberá definirse una nueva regla en el CSS con los estilos que se van a aplicar. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:

.destacado { color: red; }

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumplirá esa condición.

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO