2

現在のhtml

<main>
  <h2>あ</h2>
  <section></section>
  <section></section>
  <section></section>
  <h2>い</h2>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

h2タグに続くタグがsectionタグでなければh2タグを非表示にしたい。
上のsectionタグがない場合

<main>
  <h2>い</h2>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

上下いずれもsectionタグがない場合

<main>
</main>

元のhtmlについては、sectionタグ部分以外については、ある程度変更可能です。
変更可能なhtml案。

<main>
  <div id='hoge'>
    <h2 id='hogeh2'>あ</h2>
    <section></section>
    <section></section>
    <section></section>
  </div>
  <div id='piyo'>
    <h2 id='piyo2'>い</h2>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </div>
</main>

1 件の回答 1

4

これらを組み合わせることで「直後にsection要素が登場しないh2要素」という条件付けされたスタイル定義が可能です。

h2:not(:has(+ section)) {
  display: none;
}
<main>
  <h2>あ</h2>
  <section>1</section>
  <h2>い</h2>
  <h2>う</h2>
  <section>4</section>
  <h2>え</h2>
</main>

なお、:has()疑似クラスは2023/12/19にリリースされたFirefox 121にて主要ブラウザーでの対応が出そろいました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。