セレクターしたい
セレクター名 {
プロパティ名: 値;
}
CSSでは、要素やクラス名などのセレクター
に対してプロパティ名: 値;
を追加して設定します。
そのため、基本的なセレクターの使い方について整理してみます。
詳細はMdNのCSSセレクターを参照してください。
グループ化したい(,
)
h1,
h2,
h3 {
padding: 1rem,
}
,(カンマ)
を使ってセレクターをグループ化できます。
複数の要素(やクラス)に同じCSSを設定する場合に使います。
子孫結合子したい
main p {
padding: 1rem;
line-height: 1.5;
}
(空白)
を使って子孫要素を一括して設定できます。
子結合子したい(>
)
nav.breadcrumb > ul {
padding: 2rem;
}
<nav class="breadcrumb">
<ul>
<li><a href="URL">HOME</a></li>
<li><a href="URL">カテゴリ名</a></li>
<li>ページタイトル</li>
</ul>
</nav>
>
を使って子セレクターの設定ができます。