web-dev-qa-db-fra.com

Quelle est la différence entre les sélecteurs d'attribut pipe (|) et caret (^)?

Sur W3Schools ils déclarent que | et ^ signifie: Sélectionnez un élément avec un attribut commençant par avec une valeur spécifiée.

Alors quelle est la différence?

csscss3css-selectors
42
alex

Caret (^): sélectionne un élément (<h1>) où la valeur de l'attribut spécifié (rel) commence par une certaine valeur (val):

h1[rel^="val"] { /** formatting */ }


h1[rel^="friend"] { color: blue; }
<h1 rel="friend-external-sandwich">I'm Blue.</h1>
<h1 rel="friend2-external-sandwich">I'm Blue.</h1>
<h1 rel="external-sandwich">I'm Black.</h1>

Pipe (|): sélectionne un élément (<h1>) où la valeur de l'attribut spécifié (rel) correspond exactement à la valeur (val) ou commence par la valeur immédiatement suivie de - (val-):

h1[rel|="val"] { /**formatting */ }


h1[rel|="friend"] { color: red; }
<h1 rel="friend-external-sandwich">I'm Red.</h1>
<h1 rel="friend2-external-sandwich">I'm Black.</h1>

Vous trouverez plus d’informations sur ces sélecteurs ici: https://css-tricks.com/attribute-selectors/ ou sur la spécification CSS officielle: https://www.w3.org/TR/css3 -selectors/# attribut-sélecteurs

34
Sebastian Brosch

Comme le déclarent les écoles w3 | et ^ sélectionnez un attribut commençant par une valeur définie

No, le | n'est pas utilisé pour sélectionner des éléments dont la valeur d'attribut commence par une certaine valeur.

Voici ce que dit le W3C Spec à propos de ces sélecteurs. (c'est moi qui souligne)

[att | = val]

Représente un élément avec l'attribut att, sa valeur étant soit exactement "val" ou commençant par "val" immédiatement suivie de "-" (U + 002D). 

[att ^ = val]

Représente un élément avec l'attribut att dont la valeur commence par le préfixe "val". Si "val" est la chaîne vide, le sélecteur ne représente rien.

Ainsi, le symbole | dans le sélecteur d'attribut sélectionnerait uniquement les éléments dont la valeur d'attribut correspond exactement à la valeur donnée ou commence par la valeur donnée suivie d'un trait d'union.

Comme vous pouvez le voir dans l'extrait ci-dessous, le sélecteur d'attribut qui utilise | ([data-test |= 'val']) ne sélectionne pas l'élément lorsque la valeur de l'attribut est semblable à valid alors que le sélecteur d'attribut avec ^ ([data-test ^= 'val']) le fait.

div[data-test |= 'val'] {
  color: beige;
}
div[data-test ^= 'val'] {
  background: red;
}
<div data-test='val'>Hello</div>
<div data-test='val-id'>Hello</div>
<div data-test='valid'>Hello</div>

Dans un scénario plus réaliste, le sélecteur d'attribut avec tube (|) peut être utilisé pour sélectionner des éléments et appliquer un style spécifique en fonction de leur langue (pouvant être définie à l'aide de l'attribut lang). Comme nous pouvons le voir dans l'extrait de code, |= 'en' sélectionne tous les éléments dont l'attribut lang est soit en, soit en-GB ou en-US (ou tout autre en-*, à cet égard). 

Comme l'indique la spécification, ce sélecteur avait pour objectif premier d'autoriser les correspondances de sous-codes de langue, mais comme le fait remarquer BoltClock indique , ce sélecteur a été généralement remplacé par le sélecteur :lang pseudo-classe.

div[lang |= 'en']{
  font-size: 16px;
  background: steelblue;
}

div[lang |= 'zh']{
  font-size: 14px;
  background: mediumslateblue;
}

div{padding: 4px;}
<div lang='en'>English: The grass is green in colour.</div>
<div lang='en-GB'>English (UK): The grass is green in colour.</div>
<div lang='en-US'>English (US): The grass is green in color.</div>
<hr>
<div lang='zh-CN'>Chinese (Simplified): 草是绿色的。</div>
<div lang='zh-TW'>Chinese (Traditional): 草是綠色的。</div>

(Les traductions ont été effectuées par Google. Toute erreur était involontaire.)

Informations complémentaires: Le sélecteur d'attribut qui utilise un canal (|) a été introduit dans CSS2 et le sélecteur d'attribut qui utilise cap/caret (^) a été introduit dans CSS3.

33
Harry

Tout simplement:

E [foo | = "en"]correspond ...

un élément E dont l'attribut "foo" a une liste de valeurs séparées par un tiret et commençant par "en"

E [foo ^ = "bar"]correspond ...

un élément E dont la valeur d'attribut "foo" commence exactement par la chaîne "bar"

Informations étendues:

[att | = val]

Représente un élément avec l'attribut att, sa valeur étant exactement "val" ou commençant par "val" immédiatement suivie de "-". Ceci est principalement destiné à permettre les correspondances de sous-code de langue (par exemple, l'attribut hreflang sur l'élément a en HTML).

[att ^ = val]

Représente un élément avec l'attribut att dont la valeur commence par le préfixe "val". Si "val" est la chaîne vide, le sélecteur le fait ne représente rien.

Source: http://www.w3.org/TR/css3-selectors/#selectors

Exemples

HTML

<ul>
    <li title="test">testing attribute selectors</li>
    <li title="testing">testing attribute selectors</li>
    <li title="testing test">testing attribute selectors</li>
    <li title="testing-test">testing attribute selectors</li>
    <li title="test-testing">testing attribute selectors</li>
</ul>

Test du sélecteur de tuyau (|).

li[title|="testing"] { background-color: aqua; }

 enter image description here

Test du sélecteur caret (^).

li[title^="testing"] { background-color: pink; }

 enter image description here 

#pipe > li[title|="testing"] {
  background-color: aqua;
}
#caret > li[title^="testing"] {
  background-color: pink;
}
<p>
  <code>Testing the pipe (|) selector.</code>
</p>
<ul id="pipe">
  <li title="test">testing attribute selectors</li>
  <li title="testing">testing attribute selectors</li>
  <li title="testing test">testing attribute selectors</li>
  <li title="testing-test">testing attribute selectors</li>
  <li title="test-testing">testing attribute selectors</li>
</ul>

<hr>

<p>
  <code>Testing the caret (^) selector.</code>
</p>
<ul id="caret">
  <li title="test">testing attribute selectors</li>
  <li title="testing">testing attribute selectors</li>
  <li title="testing test">testing attribute selectors</li>
  <li title="testing-test">testing attribute selectors</li>
  <li title="test-testing">testing attribute selectors</li>
</ul>

jsFiddle

9
Michael_B

Réellement

[attr ^= value] est valeur *
Caret (^) signifie en commençant par " valeur " (et évidemment aussi la valeur exacte)

[attr |= value] est valeur OR valeur- * (i.e. [attr = value],[attr ^= value-])
Pipe (|) signifie "valeur" exacte ou commence par "valeur-" (suivi du tiret (-))

Exemple:

<!DOCTYPE html>
<html>
    <head>
        <style>
            /* [lang=en],[lang^=en-]*/
            [lang|=en] {
                background: cyan;
            }

            [lang^=ar] {
                background: Lime;
            }
        </style>
    </head>
    <body>
        <p lang="en">Hello!</p>
        <p lang="en-us">Hi!</p>
        <p lang="en-gb">Ello!</p>
        <p lang="ens">Not me!</p>

        <p lang="ar">سلام</p>
        <p lang="ar-sa">السلام علیکم</p>
        <p lang="ar-ae">السلام علیکم و رحمۃ اللہ</p>
        <p lang="ars">Me as well</p>
    </body>
</html>

0
Talha Siddiqi