¿Qué hace un [href^= "..."] en CSS?

Question

He utilizado CSS antes y me encontré con el siguiente estilo de CSS, no tengo ni idea de lo que hace.

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; 
} 

Answer 1

a[href^="http:"] 

Selecciona un elemento <a> cuya href valor del atributo comienza con http:.

Por ejemplo:

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

coincidirá con lo siguiente:

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

Answer 2

Esos son attribute-starts-with selectors, van a seleccionar <a> elementos con un atributo href a partir de ese valor, por ejemplo, a[href^="http:"] coincide con cualquier anclas con un href empezando por href="http:....", por ejemplo:

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

Answer 3

Por cada enlace, que es el parámetro "href" comienza con "http:", establecer el fondo de una imagen clave (sin repetición, posicionado en el esquina superior derecha).

Para cada enlace cuyo parámetro "href" comienza con "http://misitio.com" o "http://www.misitio.com", establezca la imagen de fondo en nada (y el margen derecho en 0).

Para mí, esto parece un inteligente truco de CSS que hará que sus usuarios se den cuenta cuando están saliendo de su sitio web a través de un enlace externo al mostrar una imagen clave.

(creo que voy a utilizar en el futuro. :)

Answer 4

Las reglas dicen que, de acuerdo con the W3C docs:

• Todas las anclas que tienen un atributo href que comienza con http:
• Todas las anclas que tienen un atributo href que comienzan con http://mysite.com o http://www.mysite.com

Answer 5

Es un selector de atributos.
La parte ^= significa que el atributo href de las etiquetas de anclaje debe comenzar con http: en su primer ejemplo.

Answer 6

Esa es una de las substring-matching attribute selectors disponible en CSS3. Coincide con los enlaces con los atributos href cuyos valores comienzan con la cadena dada.

Para ilustrar esto, vamos a tomar el ejemplo de CSS, y añadir algunos valores por defecto:

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; 
} 

Y el estilo el siguiente código HTML con él. Los estilos de salida se resumen en los comentarios:

<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> 

¿Qué está pasando?

1. Seleccionado por a única
   href="/index.php" atributo de este elemento no se inicia con http: o los otros valores.

   No hay fondo, pero hay relleno izquierdo y derecho.

2. Seleccionado por a[href^="http:"] única
   href="http://example.com" atributo de este elemento se inicia con http: pero no se inicia con http://mysite.com.

   Hay relleno izquierdo y derecho, y una imagen de fondo.

3. Seleccionado por a[href^="http:"] y a[href^="http://mysite.com"]
href="http://mysite.com" atributo de este elemento se inicia con http: y otras aperturas con http://mysite.com.

   Como el segundo selector anula el primer selector, se eliminan la imagen de fondo y el relleno derecho.

4. seleccionados por a[href^="http:"] y a[href^="http://www.mysite.com"]
href="http://www.mysite.com" atributo de este elemento se inicia con http: y otras aperturas con http://www.mysite.com (nótese la www).

   Como el segundo selector anula el primer selector, se eliminan la imagen de fondo y el relleno derecho.

5. Seleccionado por a[href^="http:"] y a[href^="http://mysite.com"]
   atributo de este elemento se inicia con http: y otras aperturas con http://mysite.com.

   Observe que, en comparación con el tercer enlace, el atributo en este contiene más que solo la URL base; sin embargo, ^= indica que el valor del atributo solo necesita comenzar con la URL base de su sitio, a diferencia de = que significa "seleccionar enlaces que solo apuntan a http://mysite.com". Por lo tanto, este enlace se corresponde con el segundo selector.

   Como el segundo selector anula el primer selector, se eliminan la imagen de fondo y el relleno derecho.