CSS seçici: çocuk olarak <img>

Çocuk resim etiketleri olmayan dış sitelere bağlantı veren tüm bağlantı etiketlerini seçmeye çalışıyorum. Bağlantı olarak bir resmim varsa, bu resimlerin yanındaki küçük harici bağlantı simgesini de ekler, ancak bunu istemiyorum.CSS seçici: çocuk olarak <img>

Bu benim bugüne kadar ne: bir avantaj olarak

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

, nasıl bunu çalışmak yapacak "https: //" bağlantıları yanı?

kaynak

2012-08-09 MaxGhost

Bu şu anda CSS ile yapılamıyor. [Hala bir üst seçici yok.] (Http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – thirtydot

CSS 4 özelliklerinin standart hale gelmesini bekleyemiyorum ... oradan gelmek için bir sürü harika özellik var gibi görünüyor. – MaxGhost

Dolgu, bağlantının sağ tarafındaki simgeye yer açıyor, ardından arka plan, görüntünün kendisini sağa hizalanmış olarak ekler. satır içi blok, görüntüyü tıklanabilir dahil tüm bağlantıyı yapar. [Daha fazla bilgi için buraya bakın] (http://web-kreation.com/all/add-file-type-icons-next-to-your-links-with-css/) – MaxGhost

Bu, düz CSS ile mümkün değildir.

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

bakınız Demosu: (HTTPS dahil) http://jsfiddle.net/hKTBp/

bakınız Demosu: http://jsfiddle.net/hKTBp/1/

jQuery sihirbazlık biraz kullanabilirsiniz Ancak

kaynak

2012-08-09 15:52:50 Curt

Güvenle yapabileceğinizi düşünmüyorum jQuery yüklü olduğunu varsayalım. – kojiro

@kojiro Katılıyorum, ancak OP'nin istediği şeyin mümkün olmadığını ve güvenli bir alternatif sunduğumu rahatlıkla söyleyebilirim. – Curt

Güzel düzeltme! JS olmayan bir çözümü tercih ederdim, ama bu işe yarıyor. JQuery'm var, bu iyi. – MaxGhost

CSS seçici: çocuk olarak <img>

cevap

İlgili konular