1

内部に select が直接含まれている場合にのみ、親 div を選択するための CSS セレクターはありますか?

コード例:

<div class="top_level">
  <input type="radio"></input>
</div>
<div class="top_level">
  <input type="text"></input>
</div>
<div class="top_level">
  <select name="namehere">
    <option>...</option>
    <option>...</option>
    <option>...</option>
  </select>
</div>

3 番目の 3rdtop_levelクラスの div のみを選択したい場合、その中に直接選択が含まれているため、どうすればよいでしょうか?

答えを探してみましたが、何も見つかりませんでした。CSSで親選択ができればもっと楽だったのに。

4

2 に答える 2

4

jQuery を使用している場合は、 :has を使用できます。

$('div.top_level:has(select)')

CSS のみを使用している場合、答えは簡単です。いいえ、親を選択するようなものはありません。

于 2013-10-06T13:37:37.527 に答える
3

:empty 疑似クラスを使用して、コンテナーが空かどうかを確認できます (改行を除く)。

要素の型が含まれているかどうかは確認できません。ただし、マークアップを再構築して :empty セレクターを使用できる場合があります

例:

<div class="top_level">
  <input type="radio"></input>
  <div class="list"></div>
</div>
<div class="top_level">
  <input type="text"></input>
  <div class="list"></div>
</div>
<div class="top_level">
  <div class="list">
  <select name="namehere">
    <option>...</option>
    <option>...</option>
    <option>...</option>
  </select>
</div>
</div>

今、あなたは次のようにクエリすることができます

.list:not(:emtpy) {
                // to select all lists that are non-empty
}
于 2013-10-06T13:46:02.283 に答える