CSS-Selektor: nein <img> als Kind

Ich versuche, alle Anker-Tags auszuwählen, die mit externen Sites verknüpft sind, die keine untergeordneten Image-Tags haben. Wenn ich ein Bild als Link habe, fügt es das kleine externe Link-Icon neben diesen Bildern hinzu, aber das möchte ich nicht.CSS-Selektor: nein <img> als Kind

Dies ist, was ich habe, so weit:

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

Als zusätzlichen Bonus, wie würde ich es mit funktioniert "https: //" Links als auch?

Quelle

2012-08-09 MaxGhost

Das kann derzeit mit CSS nicht gemacht werden. [Es gibt immer noch keinen Elternselektor.] (Http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – thirtydot

Ich kann nicht darauf warten, dass die CSS 4-Spezifikation zum Standard wird ... Es scheint, als gäbe es eine Menge cooler Features von dort. – MaxGhost

Das Padding bietet Platz für das Symbol auf der rechten Seite des Links, dann fügt der Hintergrund das Bild selbst hinzu, ausgerichtet nach rechts. Inline-Block macht den gesamten Link einschließlich des Bildes anklickbar. [Siehe hier für weitere Informationen] (http://web-kreation.com/all/add-file-type-icon-next-to-your-links-with-css/) – MaxGhost

Dies ist mit Plain CSS nicht möglich. Allerdings könnten Sie ein bisschen jQuery wizardry verwenden:

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

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

Siehe Demo (einschließlich HTTPS): http://jsfiddle.net/hKTBp/1/

Quelle

2012-08-09 15:52:50 Curt

Ich glaube nicht, dass Sie sicher gehen können Angenommen, er hat jQuery installiert. – kojiro

@kojiro Ich stimme zu, aber ich kann sicher sagen, dass was das OP will nicht möglich ist, und ich habe eine saubere Alternative zur Verfügung gestellt. – Curt

Schön fix! Ich hätte eine Nicht-JS-Lösung bevorzugt, aber das funktioniert. Ich habe jQuery, also ist das in Ordnung. – MaxGhost

CSS-Selektor: nein <img> als Kind

Antwort

Verwandte Themen