css - 仅当前一个元素包含一个类时才应用条件

Question

抱歉，如果这有点太具体了，但我真的不想为此使用 jQuery。给定以下 HTML 模板:

<form>
  <div class="row">
    <input type="text">
    <div class="hint">Hint displays on focus using Bootstrap Material Design</div>
    <!-- Nothing special applies to this because this is the first row -->
  </div>

  <div class="row">
    <input type="text">
    <!-- This will have a margin-top of 20px -->
    <!-- This doesn't have a hint so the following .row doesn't need the extra 10px -->
  </div>

  <div class="row">
    <input type="text">
    <!-- Regular margin-top of 10px -->
  </div>

</form>

以及以下 CSS:

.hint {
  display: none;
}
.row {
  margin-top: 10px;
}

对于包含 .hint 的每个 .row，我想为下一个 .row 应用 10px 的额外边距，因此.hint 可以正常显示，不会在行上溢出(当输入获得焦点时，.hint 出现在文本输入的下方)。

我想要的伪代码:

.row[previous .row contains .hint] {
    margin-top: 20px;
}

这可以用 CSS 实现还是我必须使用 Javascript？

谢谢。

Answer 1

通过为 hint 元素使用 padding-bottom: 10px 可以包含相同的间距。

.hint {
  display: none;
}
.row input:focus + .hint {
  display: block;
  padding-bottom: 10px;
}
.row {
  margin-top: 10px;
}

<form>
  <div class="row">
    <input type="text">
    <div class="hint">Hint displays on focus using Bootstrap Material Design</div>
    <!-- Nothing special applies to this because this is the first row -->
  </div>

  <div class="row">
    <input type="text">
    <!-- This will have a margin-top of 20px -->
    <!-- This doesn't have a hint so the following .row doesn't need the extra 10px -->
  </div>

  <div class="row">
    <input type="text">
    <!-- Regular margin-top of 10px -->
  </div>

</form>