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

【CSS】div要素内のすべてのp要素を選択する子孫セレクターの使い方

CSSでdiv要素内のすべてのp要素を選択する方法

CSSでは子孫セレクターと呼ばれる「element element」形式のセレクターを使用することで、ある要素の中に含まれるすべての要素を選択できます。

例えば div p と指定すると、<div>要素の中にあるすべての<p>要素がスタイル適用の対象となります。ここで重要なのは、直接の子要素だけでなく、何段階深くネストされている子孫要素もすべて選択されるという点です。

基本構文

div p {
  /* 適用したいスタイルをここに記述 */
}

実行サンプル

次のコードを実行して、子孫セレクターの実際の動作を確認してみましょう。この例では、<div>要素の外側にある<p>要素は通常どおり表示され、<div>要素の中にある<p>要素のみが白い文字色と青い背景で装飾されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div p {
            color: white;
            background-color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Demo Website</h1>
      <h2>Fruits</h2>
      <p>Fruits are good for health.</p>
      <div>
         <p>This is demo text.</p>
      </div>
   </body>
</html>

補足ポイント

  • div p：<div>要素内のすべての階層にある<p>要素を選択します。
  • div > p：<div>の直下にある子要素の<p>だけを選択したい場合は、子結合子（child combinator）を使用します。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ