2016-07-14 12 views
0

Ich habe zwei div's eins mit span, die Text haben, und zweitens mit Bild.Edit CSS auf einem div basierend auf dem Inhalt in

So zum ersten div (draggableTemplate) mit Bild I CSS mit Polsterung setzen muß: 0

und mit dem zweiten div (draggableTemplate) mit Text Ich habe CSS mit Polsterung benötigen: 10%

<div class="draggableTemplate"> 
    <img src="images/logo-blue.png" > 
</div> 

<div class="draggableTemplate"> 
    <span> Hello world... </span> 
</div> 

ich brauche etwas wie folgt aus:

.draggableTemplate has: child(img) { 
    //that have img child 
    padding:0; 
} 

.draggableTemplate has: child(span){ 
    //that have span 
    padding:10%; 
} 

ich brauche CSS Eltern festlegen, die im Inneren haben Bild und difrante CSS für Eltern mit Spannweite innerhalb

Set CSS ELTERN nicht Kind

+0

Möglichem Duplikat zu tun [CSS-Stile zu einem Elemente Nehmen in Abhängigkeit von seinen untergeordneten Elementen] (http : //stackoverflow.com/questions/2326499/apply-css-styles-to-an-element-depending-on-its-child-elements) – ca8msm

+0

Ihre ist in CSS nicht verfügbar, wo Sie Eltern basierend auf ihrem Kind auswählen können . Der Selektor "hat:" befindet sich noch im Editor-Entwurf. Möglicherweise ist er in Selektoren Level 4 verfügbar. Sie können jQuery verwenden, um dies zu erreichen. –

Antwort

0

Sie nicht wählen parent spezifischer child mit CSS.

ein Weg, dies zu tun ist, JQ zu verwenden, um mit zum Beispiel Funktion has()

hier jsfiddle

JQ siehe:

$(".draggableTemplate").has("img").css({"padding":"0"}); 
$(".draggableTemplate").has("span").css({"padding":"10%"}); 

oder so: jsfiddle

$(".draggableTemplate").has("img").addClass("has_img") 
$(".draggableTemplate").has("span").addClass("has_span") 

mit CSS

.has_img{ 
    padding:0; 
} 
.has_span{ 
    padding:10%; 
} 

gibt es eine Reihe von Möglichkeiten, dies nur NICHT mit nur CSS

+1

"einzige Möglichkeit, dies zu tun, ist JQ zu verwenden" - das ist unglaublich falsch. Sie benötigen jQuery nicht, um dies mit Javascript zu tun. – ndugger

+0

Ja. Du hast recht. Wollte sagen, dass du Thia nicht mit CSS machen kannst –

Verwandte Themen