¿Puedo apuntar a: antes o después del pseudo-elemento con un combinador de hermanos?

Question

¿Hay alguna razón por la cual este CSS no funciona?

http://jsfiddle.net/6v5BZ/

a[href^="http"]:after { 
    content:""; 
    width:10px; 
    height:10px; 
    display:inline-block; 
    background-color:red; 
} 

a[href^="http"] img ~ :after { 
    display:none; 
} 

.. en este código HTML?

<a href="http://google.com">Test</a> 
<a href="http://google.com"> 
    <img src="https://www.google.com/logos/classicplus.png"> 
</a> 

La idea es tener un pseudo-elemento en las etiquetas de anclaje coincidentes. Pero no quiero que se aplique a las etiquetas de anclaje que envuelven una imagen. Y como no puedo orientar los anclajes usando algo como a < img, pensé que tal vez podría apuntar al pseudo-elemento después de encontrar una imagen de la que sea un hermano.

Cualquier observación sería muy apreciada.

Answer 1

No puede segmentar: después de que su contenido no se representa en el DOM y no lo manipula; para que esto funcione, el DOM debería volver a procesarse y CSS no puede manipularlo de esta manera.

Comprobar la especificación para la comprensión detallada: http://www.w3.org/TR/CSS2/generate.html#propdef-content

El contenido generado no altera la estructura del documento. En particular, no se retroalimenta al procesador de lenguaje de documentos (por ejemplo, para el repaso de ).

Le sugiero que use JavaScript para hacer el trabajo por usted.

Answer 2

No se puede usar un combinador para apuntar a un pseudo-elemento relativo a elementos distintos de su elemento generador.

Esto es porque son pseudo-elementos, no elementos reales, y los combinadores solo funcionan al establecer relaciones entre los elementos reales. Un pseudo-elemento, por otro lado, solo se puede aplicar al sujeto de un selector (el selector compuesto situado más a la derecha), y esto ocurre solo después de que la coincidencia se procesa en los elementos reales. En otras palabras, la coincidencia se realiza primero como si el pseudo-elemento no estuviera allí, luego el pseudo-elemento, si está indicado dentro del selector, se aplica a cada coincidencia.

En su código, el siguiente selector:

a[href^="http"] img ~ :after 

en realidad no buscan un pseudo-elemento :after que viene después de una img dentro del a, a pesar de que parece que la forma que ambas se representan como los niños del elemento a.

Se puede reescribirse en los siguientes:

a[href^="http"] img ~ *:after 

Aviso el selector *, que está implícita. De forma similar a cómo puede omitir * antes de cualquier otro selector simple para que esté implícito, omitiendo * de un pseudo-elemento también implica que está allí. Vea el spec para más detalles.

Ahora, a pesar de que parece *:after todavía debe coincidir a:after (ya a coincidiría *), todavía no funciona de esa manera. Si se quita el pseudo-elemento :after desde el selector:

a[href^="http"] img ~ * 

Se dará cuenta de que el significado de los cambios de selector enteramente:

Seleccione cualquier elemento
que aparece como hermano siguiente de un img
que es un descendiente de un a (cuyo href comienza con "http").

Desde el img es el último hijo del elemento a en el código HTML, no hay hermanos siguientes a la altura, y por lo tanto no hay :after pseudo-elementos pueden ser generados.

En el caso de un pseudo-elemento :before o :after, se podría pensar de hacer coincidir la de pseudo-elemento de elemento generador con relación a "hermano" del pseudo-elemento, pero como el OP ha apuntado correctamente a, there is no parent selector, por lo que No tuve suerte allí también.