¿Qué hace un en CSS?

He usado CSS antes y me encontré con el siguiente estilo 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; } 

 a[href^="http:"] 

Selecciona un elemento cuyo valor de atributo href comienza con http:

Por ejemplo:

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

Coincidirá con lo siguiente:

 

This paragraph should have a green background.

Ese es uno de los selectores de atributo de coincidencia de subcadenas disponibles en CSS3. Combina enlaces con atributos href cuyos valores comienzan con la cadena dada.

Para ilustrar, tomaremos su CSS de ejemplo y agregaremos algunos valores predeterminados:

 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 escriba el siguiente HTML con él. Los estilos de salida se resumen en comentarios:

  

¿Qué esta pasando?

  1. Seleccionado por a solo
    El atributo href="https://stackoverflow.com/index.php" este elemento no comienza con http: u otros valores.

    No hay fondo, pero hay relleno izquierdo y derecho.

  2. Seleccionado por a[href^="http:"] solamente
    El atributo href="http://example.com" este elemento comienza con http: pero no comienza con http://mysite.com .

    Hay un margen izquierdo y derecho, y una imagen de fondo.

  3. Seleccionado por a[href^="http:"] y a[href^="http://mysite.com"]
    El atributo href="http://mysite.com" este elemento comienza con http: y luego comienza con http://mysite.com .

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

  4. Seleccionado por a[href^="http:"] y a[href^="http://www.mysite.com"]
    El atributo href="http://www.mysite.com" este elemento comienza con http: y comienza con http://www.mysite.com (observe www).

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

  5. Seleccionado por a[href^="http:"] y a[href^="http://mysite.com"]
    El atributo href="http://mysite.com/page.php" este elemento comienza con http: y además comienza con http://mysite.com .

    Tenga en cuenta que, en comparación con el tercer enlace, el atributo en este contiene más que solo la URL base; sin embargo, el ^= indica que el valor del atributo solo necesita comenzar con la URL base de su sitio, en oposición a = lo que significaría “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 al primer selector, se eliminan la imagen de fondo y el relleno derecho.

Esos son inicios de atributos, con selectores , seleccionarán elementos con un atributo href comience con ese valor, por ejemplo, a[href^="http:"] coincide con cualquier anclaje con un href empiece con href="http:...." , por ejemplo:

 Test  Test  

Para cada enlace cuyo parámetro “href” comienza con “http:”, establezca el fondo en una imagen clave (sin repetición, ubicada en la 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 los usuarios se den cuenta cuando abandonen su sitio web a través de un enlace externo mostrando una imagen clave.

(Creo que lo usaré en el futuro 🙂

Las reglas dicen, de acuerdo con los documentos W3C :

  • Todos los anclajes que tienen un atributo href que comienza con http:
  • Todos los anclajes que tienen un atributo href que comienzan con http://mysite.com o http://www.mysite.com

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