Selectores de clase

El selector de clase le permite establecer múltiples estilos para el mismo elemento o etiqueta en un documento. Por ejemplo, es posible que desee que ciertas secciones del texto se muestren en un color diferente al resto del texto del documento. Estas secciones resaltadas podrían ser una «alerta» que usted está configurando en la página. Puede asignar sus párrafos con clases como ésta:

 p { color: #0000ff; }
 p.alert { color: #ff0000; }

Estos estilos establecerían el color de todos los párrafos en azul (#0000ff), pero cualquier párrafo con un atributo de clase «alert» lo haría con un estilo en rojo (#ff0000). Esto se debe a que el atributo class tiene una especificidad mayor que la primera regla CSS, que sólo utiliza un selector de etiquetas. Cuando se trabaja con CSS, una regla más específica anulará otra menos específica. Así que en este ejemplo, la regla más general establece el color de todos los párrafos, pero la segunda regla, más específica, anula esa configuración sólo en algunos párrafos.

Cómo se puede usar esto en algunas marcas de revisión HTML:

Este párrafo se mostraría en azul, que es el valor por defecto para la página. / i>  de laEste párrafo también estaría en azul. / i>  
Y este párrafo se mostraría en rojo ya que el atributo class sobrescribiría el color azul estándar del elemento selector styling. / i>  / i>.
En ese ejemplo, el estilo "p.alert" sólo se aplicaría a los elementos de párrafo que utilizan esa clase "alert". Si desea usar esa clase a través de múltiples elementos HTML, simplemente elimine el elemento HTML desde el principio de la llamada de estilo (sólo asegúrese de dejar el punto (
.
) en su lugar), así:  .alert {color de fondo: #ff0000;}
Esta clase está ahora disponible para cualquier elemento que la necesite. Cualquier parte de su HTML que tenga un valor de atributo de clase «alert» obtendrá ahora este estilo. En el HTML de abajo, tenemos un párrafo y un encabezado de nivel 2 que utilizan la clase «alert». Ambos tendrían un color de fondo rojo basado en el CSS que acabamos de mostrar.

Este párrafo estaría escrito en rojo. / i>  En los sitios web actuales, los atributos de clase se utilizan a menudo en la mayoría de los elementos porque es más fácil trabajar con ellos desde una perspectiva de especificidad como lo son los IDs. Encontrará las páginas HTML más actuales para rellenar con atributos de clase, algunos de los cuales se repiten varias veces en un documento y otros que pueden aparecer sólo una vez. 
  Selectores de ID
El selector ID le permite dar un nombre a un estilo específico sin asociarlo con una etiqueta u otro elemento HTML. Supongamos que tiene una división en su marcado HTML que contiene información sobre un evento. Puede darle a esta división un atributo ID de "evento", y luego, si desea delinear esa división con un borde negro de 1 píxel de ancho, escriba un código ID como este:
 #event { border: 1px sólido #000; }
El reto con los selectores de ID es que no se pueden repetir en un documento HTML. Deben ser únicos (puede utilizar el mismo ID en varias páginas de su sitio, pero sólo una vez en cada documento HTML individual). Así que si tuvieras 3 eventos que necesiten este borde, necesitarías darles atributos ID de «event1», «event2» y «event3» y darle estilo a cada uno de ellos. Por lo tanto, sería mucho más fácil usar el atributo de clase de «evento» mencionado anteriormente y darle estilo a todos a la vez.
  Complicaciones de los atributos de identificación
Otro reto con los atributos ID es que tienen una especificidad mayor que los atributos de clase. Esto significa que si necesita tener CSS que anula un estilo previamente establecido, puede ser difícil hacerlo si ha confiado demasiado en los IDs. Es por esta razón que muchos desarrolladores web se han alejado de usar IDs en sus marcas, incluso si sólo pretenden usar ese valor una vez, y en su lugar han recurrido a los atributos de clase menos específicos para casi todos los estilos.
La única área en la que los atributos ID entran en juego es cuando se desea crear una página que tenga enlaces de anclaje dentro de la página. Por ejemplo, si tiene un sitio web de estilo paralaje que contiene todo el contenido en una sola página con enlaces que «saltan» a varias partes de esa página. Esto se hace utilizando atributos ID y enlaces de texto que utilizan estos enlaces de anclaje. Simplemente añadiría el valor de ese atributo, precedido por el símbolo «#», al atributo «href» del enlace, así:
Este es el link
Cuando se hace clic o se toca, este enlace salta a la parte de la página que tiene este atributo ID. Si ningún elemento de la página utiliza este valor de ID, el enlace no hará nada.
Recuerde, si desea crear un enlace dentro de la página en un sitio, se requerirá el uso de atributos de ID, pero aún así puede recurrir a las clases con fines de estilo CSS general. Así es como marcamos las páginas hoy en día – usamos selectores de clase tanto como nos es posible y sólo recurrimos a los IDs cuando necesitamos el atributo para actuar no sólo como un gancho para CSS sino también como un enlace dentro de la página.