Selecionar elementos por atributo de dados em CSS

488

É possível selecionar elementos em CSS pelos atributos de dados HTML5 (por exemplo, data-role)?

— Diogo Cardoso
fonte

776

Se você quer dizer usar um seletor de atributos , por que não:

[data-role="page"] {
    /* Styles */
}

Há uma variedade de seletores de atributos que você pode usar para vários cenários, todos abordados no documento ao qual vinculo. Observe que, apesar dos atributos de dados personalizados serem um "novo recurso HTML5",

os navegadores normalmente não têm problemas para oferecer suporte a atributos não padrão; portanto, você deve poder filtrá-los com seletores de atributos; e
você também não precisa se preocupar com a validação de CSS, pois o CSS não se importa com nomes de atributos sem espaço para nome, desde que eles não quebrem a sintaxe do seletor.

— BoltClock
fonte

4

É compatível com todos os navegadores?

— Christophe Debove 26/03

21

@Christophe Debove: IE7 + e tudo mais.

— BoltClock

7

O CSS parece não detectar isso se o atributo de dados estiver definido ou alterado via JS.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

30

Após uma investigação mais aprofundada, parece $("#element").data("field","value");que não altera o valor dos atributos de dados, apenas modifica a versão em cache do DOM do jQuery. Para alterar o atributo DOM real, é necessário usar $("#element").attr("data-field","value");. Tornando meu comentário original inválido.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2

Sim, parece que alterar o conjunto de dados também funciona @Matthew - jsfiddle.net/BoltClock/k378xgj3 Obrigado por nada, jQuery.

— BoltClock

107

Também é possível selecionar atributos, independentemente do conteúdo, nos navegadores modernos

com:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Por exemplo: http://codepen.io/jasonm23/pen/fADnu

Funciona em uma porcentagem muito significativa de navegadores.

Observe que isso também pode ser usado em um seletor JQuery ou usando document.querySelector

— ocodo
fonte

Uau, eu nunca vi que pudesse ser usado assim !! +1! E FWIW, agora que as imagens dos navegadores expiraram, acredito que funcione no IE7 +, portanto, seu suporte é praticamente onipresente. É engraçado que nem Chris Coyier tenha mencionado aqui #

— Camilo Martin

Obrigado @CamiloMartin removi o link browsershots para evitar confusão / aborrecimento.

— Ocode 27/12

Adicionado um link para o tópico de Chris Coyier css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

De qualquer maneira, nenhuma sintaxe é nova - mais pessoas ficaram surpresas que o IE6 não a suportasse do que o IE7 +. Você pode supor que todos os seletores CSS2.1 sejam suportados no IE8 e posterior - o IE7 faz mais, embora com alguns bugs obscuros. Todos os navegadores modernos suportam seletores de nível 3 por um tempo, com o Chrome sendo o buggy.

— BoltClock

1

Como estamos no tópico seletores de atributos, é interessante notar que os seletores de atributos de substring que foram introduzidos no nível 3 ( ^=, *=e $=) também são suportados pelo IE7 e IE8. Talvez eles tenham sido introduzidos no IE antes de serem padronizados.

— BoltClock

47

Vale a pena notar os seletores de atributos de substring CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Matas Vaitkevicius
fonte

13

Você pode combinar vários seletores e isso é muito legal, sabendo que é possível selecionar todos os atributos e atributos com base em seus valores, como hrefbaseados em seus valores, apenas com CSS.

Os seletores de atributos permitem que você brinque com alguns atributos ideclass

Aqui está uma leitura impressionante sobre os Seletores de Atributos

Violino

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Expandir snippet

Suporte para navegador:
IE6 +, Chrome, Firefox e Safari

Você pode verificar os detalhes aqui .

— Aamir Shahzad
fonte

4

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

— Naved Khan
fonte