セレクターしたい
セレクター名 {
プロパティ名: 値;
}
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>
>を使って子セレクターの設定ができます。