Selettore CSS: no <img> da bambino

Sto provando a selezionare tutti i tag di ancoraggio che si collegano a siti esterni che non hanno tag immagine figlio. Se ho un'immagine come collegamento, aggiunge la piccola icona di collegamento esterno accanto a quelle immagini, ma non lo voglio.Selettore CSS: no <img> da bambino

Questo è quello che ho finora:

a[href^="http://"]{ 
    background:transparent url(..icon/external.png) center right no-repeat; 
    display:inline-block; 
    padding-right:18px; 
}

Come bonus aggiuntivo, come potrei farlo funzionare con "https: //" link come bene?

fonte

2012-08-09 MaxGhost

Attualmente non può essere fatto con i CSS. [Non esiste ancora un selettore genitore.] (Http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – thirtydot

Non vedo l'ora che la specifica CSS 4 diventi standard ... sembra che ci sia una tonnellata di fantastiche caratteristiche da venire da lì. – MaxGhost

Il padding dà spazio all'icona sul lato destro del collegamento, quindi lo sfondo aggiunge l'immagine stessa, allineata a destra. blocco in linea rende l'intero collegamento tra cui l'immagine cliccabile. [Vedi qui per maggiori informazioni] (http://web-kreation.com/all/add-file-type-icons-next-to-your-links-with-css/) – MaxGhost

Questo non è possibile con semplici CSS. Tuttavia si potrebbe usare un po 'di jQuery magia:

jQuery:

$("a[href^='http://']:not(:has(img))").addClass("external");

CSS:

a.external { 
    background:transparent url(..icon/external.png) center right no-repeat; 
    display:inline-block; 
    padding-right:18px; 
}

See Demo: http://jsfiddle.net/hKTBp/

See Demo (tra cui HTTPS): http://jsfiddle.net/hKTBp/1/

fonte

2012-08-09 15:52:50 Curt

Non penso che tu possa tranquillamente supponiamo che abbia installato jQuery. – kojiro

@kojiro Sono d'accordo, ma posso tranquillamente dire che ciò che l'OP vuole non è possibile, e ho fornito un'alternativa pulita. – Curt

Bella correzione! Avrei preferito una soluzione non JS, ma funziona. Ho jQuery, quindi va bene. – MaxGhost

Selettore CSS: no <img> da bambino

risposta

Problemi correlati