セレクターしたい

セレクター名 {
    プロパティ名: ;
}

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>

>を使って子セレクターの設定ができます。