CSS 6: APLICAR ESTILO A UN GRUPO DE ELEMENTOS O A UN SOLO ELEMENTO

ATRIBUTO CLASS

Si lo que queremos es que la modificación afecte sólo al enlace que nosotros indiquemos, tendremos que definir un selector de clase con unas determinadas propiedades y asignarlo a los enlaces que queramos. En el ejercicio anterior cambiamos las propiedades de los enlaces. Estas propiedades se van a mantener, pero con la nueva clase que vamos a definir al pasar el ratón el enlace aparecerá en rojo y negrita. Para ello añadimos delante de ]]></b:skin>:

        a.enlacerojo {
        color: #800000;
        font-weight:bold;
        }

(Si no ponemos la a delante de la clase, al pasar el ratón el color cambiaría a naranja que es el que habíamos definido en el ejercicio anterior)

Para ver las diferencias, en la misma entrada del ejercicio anterior, copiamos en otra línea el enlace que teníamos y le añadimos el atributo class que hemos definido:

  <a href="nuestro enlace”  class="enlacerojo">Enlace para el efecto clase en rojo y negrita</a>

ATRIBUTO ID

Además de agrupar elementos, podemos necesitar identificar un elemento único. Esto se hace con el atributo id. Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar.

Vamos a cambiar las propiedades con un id en azul y negrita:

        #enlaceazul{
        color: blue;
        font-weight:bold;
        }

Volvemos a copiar en el post el enlace anterior y sustituimos la clase “enlacerojo” por el id “enlaceazul”:

    <a href="nuestro enlace”  id="enlaceazul">Enlace para ver el efecto id en azul y negrita</a>