Блог

Главная - Вопросы по программированию - примените css, если у него есть дочерний элемент

примените css, если у него есть дочерний элемент

#html #css

Вопрос:

В приведенной ниже ситуации я хочу применить css label только в том случае, если в нем есть только canvas элемент и если он находится в col-sm-12. Какая-нибудь помощь? Спасибо

 .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>

Ответ №1:

Только css здесь не поможет. Но если вы поменяете местами элементы внутри div, проблема будет решена. И вы можете разместить элементы на месте с помощью flex-направления: колонка-реверс;

 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>

Комментарии:

1. холст с надписью hi должен быть над холстом. это не работает

2. Визуально он будет находиться над холстом.

3. да, это должно быть, но оно идет вниз, поэтому мне нужно применить css, который я могу сделать плавающим: слева; позиция: абсолютная; для обозначения, если у него есть холст как у ребенка, но не для других

4. Аналогично, примените положение:абсолютное к метке

5. я хочу добраться сюда .col-sm-12 > .контрольная метка >

Метки: ,