Quelle est la différence entre cibler une classe par ".classe" ou "*[class~=box]" en css?

Question

Supposons que j'ai un élément html avec une classe de box :

Contenu ici

Récemment, j'ai appris une manière de cibler des éléments en CSS, donc si je veux sélectionner n'importe quel élément avec une classe de box je pourrais utiliser cela : *[class~=box] {border: 2px solide gris;}

Et je me demande, n'est-ce pas littéralement la même chose que de cibler simplement un élément par un nom de classe ? Ou je n'ai pas compris correctement ? .box {border: 2px solide gris;}

Si c'est la même chose, dans quelles situations est-il approprié d'utiliser la deuxième méthode plutôt que la première ?

Answer 1

Un sélecteur d'attribut n'est pas vraiment conçu pour les classes, il est conçu pour d'autres attributs dans les éléments par exemple a[href*="google"], mais oui vous pouvez styliser les éléments de cette façon et cela serait certainement considéré comme un anti-pattern .

Bien que .classname et [class~="classname"] styliseraient les mêmes éléments, la spécificité CSS de ces sélecteurs serait calculée différemment - pour être honnête, je ne suis pas exactement sûr, mais *[class~="classname"] pourrait l'emporter sur .classname et c'est quelque chose qu'une personne travaillant avec des styles qui ont été écrits de cette manière devrait être consciente.

Answer 2

Pour le choix, les sélecteurs sont en effet équivalents. Les différences entre eux sont à la fois pratiques et historiques.

Différence pratique

D'un point de vue pratique, le sélecteur de classe est beaucoup plus lisible et direct. Il est également beaucoup plus efficace, car les navigateurs traitent les classes différemment des autres attributs, pour les requêtes CSS et DOM. Le sélecteur d'attribut en général est plus logique pour tout autre attribut qui n'est pas une class, lorsque vous souhaitez sélectionner par une seule valeur dans une "Liste de mots séparés par des espaces, dont l'un est exactement la valeur" (spécification MDN).

Par exemple, si vous avez un attribut data avec plusieurs valeurs possibles à choisir comme ceci :

Le sélecteur d'attribut [data-colors~=blue] sélectionnerait les trois éléments, quelles que soient les autres valeurs de l'attribut.

Différence historique

Historiquement, le sélecteur de classe .box fait partie de la spécification CSS originale (c'est-à-dire "CSS 1"). Cela signifie que ce sélecteur est pris en charge par tous les navigateurs passés et présents. En revanche, le sélecteur d'attribut [class~=box] fait partie de la deuxième itération de la spécification CSS (c'est-à-dire "CSS2") et n'est donc pas pris en charge par tous les navigateurs possibles ; bien que vous deviez remonter jusqu'à Internet Explorer 6 pour rencontrer des problèmes avec ce sélecteur.

Answer 3

Une différence importante est l'utilisation de certains noms spéciaux avec vos classes.

Voici un exemple pour illustrer:

.box {
  height:50px;
  background:red;
  margin:5px;
}

.80% {
  width:80%;
}

.50% {
  width:50%;
}

Dans ce qui précède, rien ne se passera car nous devons échapper le nombre et le % à l'intérieur du sélecteur mais avec le sélecteur d'attribut c'est facile:

.box {
  height:50px;
  background:red;
  margin:5px;
}

[class~="80%"] {
  width:80%;
}

[class~="50%"] {
  width:50%;
}

Pour la première, vous devez écrire ce qui suit qui n'est pas trivial:

.box {
  height:50px;
  background:red;
  margin:5px;
}

.\38 0\% {
  width:80%;
}

.\35 0\% {
  width:50%;
}

Answer 4

Les deux auraient exactement le même résultat donc *[class~="classname"] est équivalent à .classname, juste que la sélection est faite en utilisant l'attribut class. Voir sélecteur d'attribut pour plus d'informations sur cette syntaxe.

.classname {
  color: blue;
}

*[class~="classname"] {
  color: red;
}

Contenu ici

*[class~="classname"] {
  color: red;
}

.classname {
  color: blue;
}

Contenu ici