ejemplo - selector adyacente css

Selectores de atributos CSS2 con Regex

Question

Los selectores de atributos CSS permiten la selección de elementos en función de los valores de los atributos. Desafortunadamente, no los he usado en años (principalmente porque no son compatibles con todos los navegadores modernos). Sin embargo, recuerdo claramente que pude usarlos para adornar todos los enlaces externos con un ícono, usando un código similar al siguiente:

a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}

El código anterior no funciona. Mi pregunta es: ¿Cómo funciona? ¿Cómo selecciono todas las etiquetas <a> cuyo atributo href comienza con "http" ? La especificación oficial de CSS (vinculada arriba) ni siquiera menciona que esto es posible. Pero sí recuerdo haber hecho esto.

( Nota : la solución obvia sería usar atributos de class para distinguir. Quiero evitar esto porque tengo poca influencia sobre la forma en que se construye el código HTML. Todo lo que puedo editar es el código CSS).

Answer 1

Tenga en cuenta que, en el ejemplo de Antti, es probable que desee agregar una captura de los enlaces absolutos que pueda tener a su propio dominio, que probablemente no desee marcar como ''externo'', por ejemplo:

a[href^="http://your.domain.com"]
{
    background: none;
    padding: 0;
}

Y querrías esto después de la declaración anterior.

Es posible que también desee incluir el prefijo de protocolo completo, en caso de que tenga un documento local denominado "http-info.html" al que desea vincular, por ejemplo:

a[href^="http://"]
{
    background: url(external-uri);
    padding-left: 12px;
}

Tenga en cuenta que, en ambos casos ligeramente más complejos, debe citar el valor. Estos trabajos, para mí, en IE7.

Answer 2

En cuanto a CSS 2.1, vea http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Resumen ejecutivo:

Attribute selectors may match in four ways: [att] Match when the element sets the "att" attribute, whatever the value of the attribute. [att=val] Match when the element''s "att" attribute value is exactly "val". [att~=val] Match when the element''s "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces). [att|=val] Match when the element''s "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

CSS3 también define una lista de selectores , pero la compatibilidad varía enormemente .

También hay un ingenioso conjunto de pruebas que muestra qué selectores funcionan en su navegador.

En cuanto a tu ejemplo,

a[href^=http]
{
    background: url(external-uri);
    padding-left: 12px;
}

debería hacer el truco. Desafortunadamente, IE no lo admite.

Answer 3

La respuesta de Antti es suficiente para seleccionar los anclajes cuyos href comienzan con http y ofrecen un resumen perfecto de los selectores de atributos regex-esque CSS2 disponibles, como los siguientes:

Attribute selectors may match in four ways:

[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element''s "att" attribute value is exactly "val".
[att~=val]
Match when the element''s "att" attribute value is a space-separated list of
"words", one of which is exactly "val". If this selector is used, the words in the 
value must not contain spaces (since they are separated by spaces).
[att|=val]
Match when the element''s "att" attribute value is a hyphen-separated list of
"words", beginning with "val". The match always starts at the beginning of the
attribute value. This is primarily intended to allow language subcode matches
(e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

Sin embargo, aquí está la forma ACTUALIZADA de seleccionar todos los enlaces salientes utilizando el nuevo CSS3 : no selector de pseudoclase , así como la nueva sintaxis * = substring para asegurarse de que no tenga en cuenta los enlaces internos que aún pueden comenzar con http :

a[href^=http]:not([href*="yourdomain.com"])
{
    background: url(external-uri);
    padding-left: 12px;
}

* Tenga en cuenta que esto no es soportado por IE, hasta al menos IE8. Gracias, IE, eres el mejor: P