[Ovillo] ¿ID o Class que elegir?

[Iban Rodriguez]

Veo bastantes veces este problema, y creo que hay gente que lo tiene 
confuso.

"id" NO aplica estilos ni tiene relación directa con CSS.
"class" en cambio está indicando una "clase", que sí sirve para 
aplicarle un formato (o estilo) a ese elemento.

El "id" vendría a ser el identificador del objeto, y debería ser único 
en toda la hoja HTML. Aunque la mayoría de navegadores tragan, puede dar 
problemas. Digamos que sólo puede haber una "cabecera", un "pie", o un 
"menu_izquierda". Para eso utilizamos el ID. Para identificar elementos 
ÚNICOS.

La clase es simplemente un formato. Como si lo llamamos "negrita", o 
"texto_arial".

Ahora, las hojas de estilo CSS permiten definir clases, y también 
permiten indicar el formato para elementos únicos, identificados por su 
"id". Y cómo no, permiten REdefinir etiquetas HTML.

Es decir, no hace falta liarse tanto... para los divs que son únicos y 
son elementos exclusivos en ESA hoja (obviamente se pueden repetir en 
otras hojas), utilizamos un ID. Para el resto de cosas, clases.

Así, si tenemos un listado resultado para una galería de fotos podríamos 
utilizar "fila1" y "fila2" como dos clases diferentes para alternar 
colores. La tabla o div principal seria por ejemplo "lista_resultado". 
Se definiría un estilo con #lista_resultado, pero eso no quita que 
podamos aplicarle, además, una clase... por ejemplo:

<div id="lista_resultado" class="rojo">

El id está indicando el identificador de elemento, que aprovechamos para 
definir los estilos, y la class está aplicando una clase que también 
estará definida en la hoja de estilos.


Espero haber sido de ayuda.
Un saludo.


final20 escribió:
> Durante ya un buen tiempo tengo esta duda que por desgracia google no ha 
> logrado responder(o es tal ves que yo no he buscado de la forma correcta 
> ahora si le quede mal a mi firma xD)y es cual es la diferencia entre 
> usar id y class y como afecta a esto a la accesibilidad y porque de 
> antemano les agredesco sus respuestas ^^
>
>