web-dev-qa-db-fra.com

Que fait un [href ^ = "..."] en CSS?

J'ai déjà utilisé CSS et je suis tombé sur le style CSS ci-dessous. Je ne sais pas ce qu'il fait. 

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}
csscss3css-selectors
35
user443946
a[href^="http:"]

Sélectionne un élément <a> dont la valeur de l'attribut href commence par http:.

Par exemple: 

p[title^="para"] {background: green;}

Correspondra à ce qui suit:

<p title="paragraph"> This paragraph should have a green background. </p>
42
Russell Dias

C'est l'un des sélecteurs d'attributs de correspondance de sous-chaîne disponibles dans CSS3. Il fait correspondre les liens avec les attributs href dont les valeurs commencent par la chaîne donnée.

Pour illustrer notre propos, prenons votre exemple de CSS et ajoutons quelques valeurs par défaut:

a {
   background: none; padding: 0 1em;
}

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

Et stylisez le code HTML suivant avec. Les styles de sortie sont résumés dans des commentaires:

<ul>
    <!-- [1] No background, 1em left and right padding -->
    <li><a href="/index.php">My site's page</a></li>

    <!-- [2] Background, 1em left and right padding -->
    <li><a href="http://example.com">External link</a></li>

    <!-- [3] No background, no right padding -->
    <li><a href="http://mysite.com">My site's base URL without www</a></li>        

    <!-- [4] No background, no right padding -->
    <li><a href="http://www.mysite.com">My site's base URL with www</a></li>

    <!-- [5] No background, no right padding -->
    <li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li>
</ul>

Que ce passe-t-il?

  1. Sélectionné par a uniquement
    L'attribut href="/index.php" de cet élément ne commence pas par http: ou les autres valeurs.

    Il n'y a pas de fond, mais il y a un rembourrage à gauche et à droite.

  2. Sélectionné uniquement par a[href^="http:"]
    L'attribut href="http://example.com" de cet élément commence par http: mais pas par http://mysite.com.

    Il y a un rembourrage à gauche et à droite et une image d'arrière-plan.

  3. Sélectionné par a[href^="http:"] et a[href^="http://mysite.com"]
    L'attribut href="http://mysite.com" de cet élément commence par http: et commence ensuite par http://mysite.com.

    Comme le deuxième sélecteur remplace le premier sélecteur, l'image d'arrière-plan et le remplissage à droite sont supprimés.

  4. Sélectionné par a[href^="http:"] et a[href^="http://www.mysite.com"]
    L'attribut href="http://www.mysite.com" de cet élément commence par http: et commence ensuite par http://www.mysite.com (remarquez le nom www).

    Comme le deuxième sélecteur remplace le premier sélecteur, l'image d'arrière-plan et le remplissage à droite sont supprimés.

  5. Sélectionné par a[href^="http:"] et a[href^="http://mysite.com"]
    L'attribut href="http://mysite.com/page.php" de cet élément commence par http: et commence ensuite par http://mysite.com.

    Notez que, comparé au troisième lien, l'attribut dans celui-ci contient plus que juste l'URL de base; Cependant, le ^= indique que la valeur de l'attribut doit simplement commencer par l'URL de base de votre site, par opposition à =, ce qui signifierait "sélectionner des liens pointant uniquement vers http://mysite.com". Par conséquent, ce lien est associé au second sélecteur.

    Comme le deuxième sélecteur remplace le premier sélecteur, l'image d'arrière-plan et le remplissage à droite sont supprimés.

25
BoltClock

Ceux-ci sont attribute-starts-with selectors , ils sélectionneront les éléments <a> avec un attribut href commençant par cette valeur, par exemple. a[href^="http:"] fait correspondre les ancres avec une href commençant par href="http:....", par exemple:

<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a>              <!-- wouldn't match -->
6
Nick Craver

Pour chaque lien dont le paramètre "href" commence par "http:", définissez l'arrière-plan sur une image clé (sans répétition, dans le coin supérieur droit).

Pour chaque lien dont le paramètre "href" commence par "http://mysite.com" ou "http://www.mysite.com", définissez l'image de fond sur rien (et le remplissage à droite sur 0).

Pour moi, cela ressemble à une astuce CSS astucieuse qui permettra à vos utilisateurs de savoir quand ils quittent votre site Web via un lien externe en affichant une image clé.

(Je pense que je vais l'utiliser à l'avenir. :)

5
Lazlo

Les règles disent, selon les documents du W3C :

  • Toutes les ancres qui ont un attribut href qui commence par http:
  • Toutes les ancres qui ont un attribut href qui commence par http://mysite.com ou http://www.mysite.com
0
rfunduk

C'est un sélecteur d'attribut.
La partie ^ = signifie que l'attribut href des balises d'ancrage doit begin with http: dans votre premier exemple.

0
chigley