CODEWITHSUNDEEP
htmlcss
David
David

Reputation: 276

apply css if it has child element

In below situation I want to apply css label to only if it has only canvas element and if it is in col-sm-12. Any help? Thanks

.col-sm-12>.control-label  { /* if it has canvas */
  float: left;
  position: absolute;
}
<div class="s-field col-sm-12">
  <label class="control-label mb5">canvas</label>
  <canvas id="editable-image-canvas" class="icanvas" width="500" height="461"></canvas>
</div>

<div class="s-field col-sm-12">
  <label class="control-label mb5">first name</label>
  <input type="text" class="form-control">
</div>

Upvotes: 1

Views: 178

Answers (1)

italant
italant

Reputation: 305

Only css won't help here. But if you swap the elements inside the div, the problem is solved. And you can put the elements in place with flex-direction: column-reverse;

div {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}

div canvas + label {
  color: red;
  position: absolute;
  float: left;
}

canvas {
  width: 200px;
  height: 50px;
  border: 1px solid aquamarine;
}
<div>
  <canvas></canvas>
  <label>Canvas</label>
</div>

<div>
  <input type="text" />
  <label>First name</label>
</div>

Upvotes: 1

Related Questions