最終更新日: 2020年12月26日
CSSの大なり小なりの記号「>」の意味と使い方を解説！
CSSの大なり小なりの記号「>」を使ったセレクタの指定の意味や使い方についてサンプルコード付きで解説します。「直下の子要素」を意味する「>」の使い方をマスターしましょう！
CSSの大なり小なりの記号の「>」意味は？
他のCSSファイルのスタイルを見ている時にセレクタで大なり小なりの記号の「>」を使っているのを見てその意味はなんだろうと思った方はいないでしょうか。
セレクタでこの「>」記号がある際には直下の子要素を意味します。つまり下記のように
/* div要素の中の全てのa要素にスタイルを適用する */
div a {
}
/* div要素の直下のa要素にスタイルを適用する */
div > a {
}「>」がセレクタにつくと「直下の」という絞り込みがセレクタで表現され、より限定的な指定となります。また上記のコードでは「>」の前後に半角スペースを入れていますが、スペースを入れなくても同じ意味になります。
それでは具体的な、この大なり小なりの「記号の使い方をサンプルコード付きで見ていきましょう。
CSSの大なり小なりの記号「>」の使い方
下記のサンプルコードを見てみましょう。
今回は「div > a」というセレクタを指定していて、対象の要素の色を赤にしています。
今回a要素は2つありますが、div要素直下のa要素のみ文字色が赤になっていて、div要素から見て入れ子になっているa要素の文字色は変わっていません。
「>」は直下の子要素を意味し、今回はdiv要素直下のa要素のみ文字色が変わっています。
