Atributos definidos por usuario

HTML

Las etiquetas HTML tienen atributos.

    <a href="index.html">Índice</a>

El desarrollador web puede añadir más atributos personalizados a las etiquetas.

    <a href="index.html"
       data-comando="rambo"
    >Índice</a>

Todos los atributos personalizados empiezan por "data-" y luego el nombre del atributo que se quiera.

Javascript

En Javascript se usa dataset para acceder a los atributos personalizados.

    const a = document.querySelector('a');
    alert(a.dataset.comando); // rambo
    a.dataset.comando = "acorralado";

CSS

Se accede a los atributos personalizados de la misma manera que a un atributo normal.

Todas las etiquetas a con atributo comando:

    a[data-comando] { ... }

Todas las etiquetas a cuyo atributo comando es "rambo":

    a[data-comando="rambo"] { ... }

Todas las etiquetas a cuyo atributo comando contiene la palabra "rambo":

    a[data-comando~="rambo"] { ... }

Proinf.net