0

I have two div's one with span that have text, and second with image.

So to the first div (draggableTemplate) with image I need set CSS with padding:0

and to the second div(draggableTemplate) with text I need set CSS with padding:10%

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

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

I need something like this:

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

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

I need to set css to parent that have image inside and difrante css for parent with span inside

Set css to PARENT not child

smac89
  • 26,360
  • 11
  • 91
  • 124
Vladimir Potapov
  • 2,147
  • 5
  • 35
  • 63
  • Possible duplicate of [Apply CSS styles to an element depending on its child elements](http://stackoverflow.com/questions/2326499/apply-css-styles-to-an-element-depending-on-its-child-elements) – ca8msm Jul 14 '16 at 14:20
  • their is no way available in CSS where you can select parent based on their child. that "has:" selector is still in editor draft may available in Selectors Level 4. you can use jQuery to achieve this. – Code Warrior Jul 14 '16 at 17:55

1 Answers1

0

you cannot select parent of specific child with CSS .

one way to do this is to use JQ with, for example, function has()

see here jsfiddle

JQ :

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

or like this : jsfiddle

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

with CSS 

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

there are a number of ways to do this just NOT with only CSS

Mihai T
  • 15,254
  • 2
  • 16
  • 30