CSS selector: no <img> jako dziecko

Próbuję wybrać wszystkie znaczniki zakotwiczenia, które prowadzą do zewnętrznych stron, które nie mają podrzędnych tagów graficznych. Jeśli mam obraz jako link, dodaje on również małą ikonę zewnętrznego linku obok tych obrazów, ale nie chcę tego.CSS selector: no <img> jako dziecko

To jest to, co mam do tej pory:

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

Jako dodatkowy bonus, jak chciałbym, aby pracować z „https: //” linki, jak również?

Źródło

2012-08-09 MaxGhost

Nie można tego obecnie zrobić przy użyciu CSS. [Nadal nie ma selektora nadrzędnego]. (Http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – thirtydot

Nie mogę się doczekać, aż specyfikacja CSS 4 stanie się standardem ... Wygląda na to, że nadchodzi mnóstwo fajnych funkcji. – MaxGhost

Wypełnienie zapewnia miejsce dla ikony po prawej stronie łącza, a tło dodaje sam obraz, wyrównany w prawo. inline-block sprawia, że cały link z obrazem jest klikalny. [Zobacz tutaj, aby uzyskać więcej informacji] (http://web-kreation.com/all/add-file-type-icons-next-to-your-links-with-css/) – MaxGhost

Nie jest to możliwe w przypadku zwykłego CSS. Jednakże można użyć trochę jQuery Czarodziejstwa:

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/

Zobacz demo (w tym HTTPS): http://jsfiddle.net/hKTBp/1/

Źródło

2012-08-09 15:52:50 Curt

Nie sądzę, że możesz bezpiecznie załóżmy, że ma zainstalowany jQuery. – kojiro

@kojiro Zgadzam się, ale mogę spokojnie powiedzieć, że to, czego chce OP, nie jest możliwe, a ja zapewniłem schludną alternatywę. – Curt

Dobra poprawka! Wolałbym rozwiązanie inne niż JS, ale to działa. Mam jQuery, więc jest w porządku. – MaxGhost

CSS selector: no <img> jako dziecko

Odpowiedz

Powiązane problemy