Por favor, note que, porque os atributos de dados são atributos HTML simples, você pode até acessá-los do CSS. Por exemplo, para mostrar o data-parent No artigo, você pode usar o conteúdo gerado no CSS com a função attr:
article::before { content: attr(data-parent);}Você também pode usar as seleções de atributos no CSS para alterar os estilos de acordo com as priopities de dados:
article { width: 400px;}article { width: 600px;}Você pode ver tudo isso trabalhando juntos neste exemplo do JSBIN.
Os atributos de dados também podem ser armazenados para que eles contenham informações constantemente alterando, como pontuações em um jogo. Usando seletores CSS e acesso a JavaScript aqui, isso permite que você crie alguns efeitos engenhosos sem ter que escrever suas próprias rotinas de visualização. Veja este screencast para ver um exemplo usando conteúdo gerado e transações CSS (exemplo JSBIN).
Os valores de dados são seqüências de caracteres. Os valores numéricos devem ser citados no seletor para que o estilo entre em vigor.