Quelle est la différence entre * et *|* en CSS ?

Question

En CSS, * correspondra à n'importe quel élément.

Fréquemment, *|* est utilisé à la place de * pour correspondre à tous les éléments. Cette méthode est généralement utilisée à des fins de test.

Quelle est la différence entre * y *|* en CSS ?

Answer 1

Conformément à W3C Selector Spec :

Le sélecteur universel autorise un composant d'espace de nom facultatif. Il est utilisé comme suit :

ns|*
tous les éléments de l'espace de nom ns

*|*
tous les éléments

|*
tous les éléments sans espace de nom

*
si aucun espace de nom par défaut n'a été spécifié, ceci est équivalent à *|*. Sinon, c'est équivalent à ns|* où ns est l'espace de noms par défaut.

Donc, non. * y *|* ne sont pas toujours les mêmes. Si un espace de nom par défaut est fourni, alors * ne sélectionne que les éléments qui font partie de cet espace de nom.

---

Vous pouvez voir les différences à l'aide des deux extraits ci-dessous. Dans le premier, un espace de nom par défaut est défini et donc la balise * applique l'arrière-plan de couleur beige uniquement à l'élément qui fait partie de cet espace de nommage, tandis que le sélecteur *|* applique la bordure à tous les éléments.

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

Dans l'extrait ci-dessous, aucun espace de nom par défaut n'est défini et donc les deux éléments * y *|* s'applique à tous les éléments et tous obtiennent donc à la fois le fond beige et la bordure noire. En d'autres termes, ils fonctionnent de la même manière lorsqu'aucun espace de nom par défaut n'est spécifié.

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

---

Comme le souligne BoltClock dans les commentaires ( 1 , 2 ), à l'origine, les espaces de noms ne s'appliquaient qu'aux langages basés sur XML tels que XHTML, SVG, etc. Mais selon les dernières spécifications, tous les éléments HTML (c'est-à-dire les éléments dans l'espace de noms HTML) ont un espace de noms de type http://www.w3.org/1999/xhtml . Firefox suit ce comportement et il est cohérent dans tous les agents utilisateurs HTML5. Vous pouvez trouver plus d'informations dans cette réponse .

Answer 2

*|* représente le sélecteur de "tous les éléments de n'importe quel espace de nom". Selon au W3C le sélecteur est divisé en deux parties :

ns|E

Où ns est le espace de noms et E est l'élément. Par défaut, aucun espace de noms n'est déclaré. Donc, à moins qu'un espace de noms soit déclaré explicitement, *|* y * sélectionnera les mêmes éléments.

Answer 3

En CSS, * correspondra à n'importe quel élément.

| est utilisé pour correspondre à la sélection éléments spécifiques . Les deux sont des sélecteurs utilisés pour nos tests