Introducción a CSS 2.1.4. Selector de clase


Introducción a CSS
2.1.4. Selector de clase
Si se considera el siguiente código HTML de ejemplo:
Lorem ipsum dolor sit amet...

Nunc sed lacus et est adipiscing accumsan...

Class aptent taciti sociosqu ad litora...

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? 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. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:
Lorem ipsum dolor sit amet...

Nunc sed lacus et est adipiscing accumsan...

Class aptent taciti sociosqu ad litora...

A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. 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 cumple esa condición.
Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class:
Lorem ipsum dolor sit amet...

Nunc sed lacus et est adipiscing accumsan...

Class aptent taciti sociosqu ad litora...

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que
permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.
A continuación se muestra otro ejemplo de selectores de clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda; }.error {color: #930; font-weight: bold; }
Introducción a CSS Capítulo 2. Selectores...
...

Fuente. Introducción a CSS
Javier Eguíluz Pérez
www.librosweb.es

Entradas populares de este blog

CERRAR SESIÓN o APAGAR EL EQUIPO.

Curso Excel 2010 4.3. Ampliar o reducir una selección

Retiro de la tarjeta madre