J'ai une liste avec des lignes, chaque li a un attribut état de données quelle valeur peut être 1-5: li que le Statut de données est 1 à avoir un arrière-plan différent,
Est-il possible de faire en CSS?
3 Réponses :
Je crois que vous pouvez faire Il y a un exemple de travail à http: //jsfiddle.net/adamh/ggtff/
Travaille absolument. Je pense que c'est un moyen plus courant de l'écrire, bien que: Li [Statut de données = "1"]: Nth-enfant (2n + 1)
@Billcriswell merci, absolument raison. J'ai réorganisé mon sélecteur
Cela ne fonctionne pas si vous devez garder un nombre pair / impaire de statut de données = "1" uniquement, au lieu de générique impair - même de toutes les lignes
@Andrealigios Oui, en fait, ce n'est pas possible dans CSS, Nth-of-Type Elément de respect mais pas élément [attr] combinaison
@Andrealigios Si je vous comprends, je pense que cela fait - voir mon exemple de jsfiddle dans la réponse ci-dessus
@Adam, vous pouvez également le rendre plus simple anglais simplement en utilisant li [statut de données = "1"]: Nth-enfant (impair) {}
Ceci est modifier la couleur de toutes les lignes impaires que l'état = 1, dans mon exemple, il coulent les: 1st, 3ème et 4ème de l'état = 1 parce que ce sont des rangées impaires.
Adam. Andrea est juste ici. Nous venons de recevoir de la chance avec l'ordre
Si la question est li:nth-match(odd of [data-status="1"])
Je viens de vérifier SELECTORS 4 SPEC . Il n'y a rien appelé nth-match () défini dans celui-ci. Peut-être que c'était enlevé? Quel que soit le cas, cela n'existe pas.
Ah, sur l'examen plus approfondi, il a été supprimé de la spécification: Stackoverflow.com/a/31415015/3597276
@Michael_b je savais que cela se produisait, mais j'ai oublié de venir ici à mettre à jour la réponse (et probablement il y a un autre couple de réponse à mettre à jour) ... Je l'ai fait maintenant, merci
@Andrealigios, j'espérais vraiment que votre réponse a fonctionné! Comme j'essaie de créer une réponse à cette question: Stackoverflow.com/q/35355253/3597276 ... !
Si vous n'êtes pas contre l'utilisation de JQuery, vous pouvez utiliser cette approche.
$('li[data-status=1]').toggleClass(function(idx){
return idx % 2 === 0 ? 'odd-status-one' : 'even-status-one';
});