CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで<p>要素の後に続くすべての<ul>要素を選択する方法

CSSで<p>要素の後に続くすべての<ul>要素を選択する方法

CSSの一般兄弟結合子（~）を使うと、<p>要素よりも後に出現するすべての兄弟要素である<ul>要素をまとめて選択できます。この記事では、「p ~ ul」セレクタの基本的な考え方と、実際に動作するコード例をわかりやすく解説します。

セレクタの基本構文

p ~ ul {
  color: white;
  background-color: blue;
}

このセレクタは、<p>要素と同じ親要素を持ち、かつ<p>要素の後ろに位置するすべての<ul>要素に対してスタイルを適用します。逆に言えば、<p>要素より前に出現している<ul>要素には一切影響しません。これにより、「特定の見出しや段落の後に続くリストだけ」を狙って装飾することが可能になります。

実装例

以下のコードをブラウザで実行して、実際の挙動を確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p ~ ul {
        color: white;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Demo Website</h1>
    <h2>Fruits</h2>
    <div>
      <p>Vegetables are good for health.</p>
      <ul>
        <li>Spinach</li>
        <li>Onion</li>
        <li>Capsicum</li>
      </ul>
    </div>
    <p>Fruits are good for health.</p>
    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Kiwi</li>
    </ul>
  </body>
</html>

コードの解説

この例では、<p>要素の後に続く<ul>要素に対して「白い文字色＋青い背景色」が適用されます。

ポイントは以下の2つです。

  • div 要素内では、「Vegetables are good for health.」という段落の後に続く野菜リストが対象になります。
  • body 直下では、「Fruits are good for health.」という段落の後に続くフルーツリストが対象になります。

このように一般兄弟結合子（~）は、隣接兄弟結合子（+）と異なり、直後の要素だけでなく後ろに存在するすべての該当要素にマッチするのが特徴です。段落や見出しの後に複数のリストが並ぶようなマークアップでも、柔軟にスタイリングできるため覚えておくと便利です。

  1. CSSでリストをスタイリングする方法｜list-style系プロパティの使い方を徹底解説

    HTMLのリストには、番号が付く「順序付きリスト（ol）」と、記号が付く「順序なしリスト（ul）」の2種類があります。CSSを使用すると、これらのリスト項目に表示されるマーカー（記号や番号）の種類を自由に変更したり、任意の画像をマーカーとして設定したりすることができます。さらに、マーカーの表示位置も細かく制御可能です。それでは、具体的なコード例とともに各プロパティの使い方を見ていきましょう。list-style-type ― マーカーの種類を指定するlist-style-type プロパティは、リスト項目のマーカーの種類を設定するために使用します。円（disc）、四角（square）、ローマ数

  2. CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】

    Webページにカレンダーを表示したいとき、CSS（スタイルシート）だけでも十分に実現できます。JavaScriptなどのスクリプトに頼らなくても、HTMLのリスト要素とCSSを組み合わせるだけで、月表示のカレンダーを見やすいレイアウトで作成することが可能です。 ここでは、月名の表示、前月・次月へのナビゲーション矢印、曜日ヘッダー、日付グリッド、さらに「今日」の日付を円形でハイライトする演出まで含めた、実用的なカレンダーのサンプルコードを紹介します。 サンプルコード CSSでカレンダーを作成するには、以下のように記述します。 <!DOCTYPE html> <html>