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

CSS子セレクター（>）とは？使い方とサンプルコードで解説

CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。

構文

CSS子セレクターの基本構文は以下の通りです。

element > element {
/* 宣言 */
}

使用例1

次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    padding: 5px;
}
article > div {
    border: dashed midnightblue;
    width: 45%;
}
div > p {
    font-size: 20px;
    font-style: italic;
    box-shadow: inset 0 0 8px orange;
}
</style>
</head>
<body>
<h2>試験情報</h2>
<article>
    <div>試験詳細</div>
    <div><p>試験は午前11時に開始します。</p></div>
    <span><div>携帯電話の持ち込みはできません。</div></span>
    <div>
    <div>受験者は10時45分までに会場へ到着してください。</div>
    <br/>
    受験者は受験票を持参する必要があります。
    </div>
</article>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

CSS子セレクター（ ）とは？使い方とサンプルコードで解説

使用例2

続いて、入れ子になったdiv要素に子セレクターを適用した例です。div > divと指定することで、外側のdivの直下にある内側のdivだけにスタイルが反映されます。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    width: 200px;
    padding: 30px;
    background-color: moccasin;
}
div > div {
    box-shadow: inset 0 0 8px mediumseagreen;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

CSS子セレクター（ ）とは？使い方とサンプルコードで解説

  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などの主要ブ