CSSセレクター

ページが要素でいっぱいで、適用したいスタイルのセットがあります。しかし色やフォントは、どの要素に属するかを指定できるまでは役に立ちません。セレクターは正しい要素を指し示す方法です。この段落、すべてのボタン、navの中のリンクだけ。セレクターに慣れれば、CSSの残りはどの要素を変更するかを選ぶだけになります。なぜなら、既にそこにアクセスする方法を知っているからです。

要素型、クラス、ID セレクター

CSSルールには2つの部分があります。スタイルする要素を選ぶ**セレクター**と、どのようにするかを指定する宣言ブロックです。最も単純なセレクターは、要素型セレクターと呼ばれる要素の名前です。pと書くと、ページのすべての段落がスタイル設定されます。

これは多すぎることがよくあります。通常、すべての段落を同じように見せたくはありません。そこで、HTMLのclass属性を使って要素にクラスというラベルを付け、CSSからドットを前に付けてそのラベルをターゲットにします。クラスは名札のようなものと考えてください。グループとして扱いたいすべての要素に同じタグをピンで留め、そのタグを一度スタイル設定します。

html

<button class="btn-primary">申し込む</button>
<button class="btn-primary">今すぐ購入</button>

css

/* 要素型セレクター: ページ上のすべてのボタン */
button {
  font-family: inherit;
}

/* クラスセレクター: btn-primaryタグ付きの要素のみ */
.btn-primary {
  background: rebeccapurple;
  color: white;
}

両方のボタンは1つのルールから.btn-primaryスタイルを取得します。なぜなら、それらはクラスを共有しているためです。その再利用は、クラスに手を伸ばす理由全体です。これはCSSがどのように機能するかに直接構築されています。ここで各ルールはセレクターと宣言のセットをペアリングします。

Juno要素型、クラス、ID セレクターpのような要素型セレクターはその種類のすべての要素にヒットし、通常はあなたが望むより多くです。クラスはあなたが気になる要素にピンで留める名札で、btn-primaryのようにドットでスタイル設定します。ほぼすべてにクラスから始めれば、大きく間違えることはありません。

コンビネーター: 関係性によるセレクション

時には別の要素の中にある場合にのみ要素をスタイル設定したいことがあります。ナビゲーション内のリンクは、段落内のリンク（どちらも<a>要素）とは異なる外観を持つはずです。その関係を**コンビネーター**で説明します。2つのセレクターをスペースで並べてください。CSSはそれを「2番目のもの、ただし最初のもの内のみ」と解釈します。

つまり、.nav aは「クラスnavを持つ要素内の任意のリンク」を意味します。ここではスペースが実際に機能しています。装飾ではなく、内部を見る指示です。

css

/* ディセンダント: navの内部の任意のリンク */
.nav a {
  text-decoration: none;
}

/* チャイルド: .menuの直接の子であるリスト項目のみ */
.menu > li {
  display: inline-block;
}

最初のルールはnavの内部にネストされたすべてのリンクに到達します。2番目はメニューの最上位の項目のみに到達し、ネストされたリストは放置します。それらの間を選ぶことは、ルールがどこまで下へ移動するかを選ぶことです。

Junoコンビネーター 2つのセレクター間のスペースは「内部」を意味します。nav aはnavの内部に座るリンクをスタイル設定します。そのスペースは指示であり、見た目のための間隔ではありため、誤ってドロップしないでください。このパターンだけで多くの日常的なスタイル設定がカバーされます。

疑似クラス: 状態によるスタイル設定

要素はさまざまな状態にある可能性があります。リンクは静止しているか、マウスがその上にホバーしているかもしれません。**疑似クラス**により、要素をその状態に基づいてスタイル設定でき、セレクターの後に単一のコロンで記述されます。

最初に使用するのは:hoverです。.btn-primary:hoverと書いて、ポインターがボタンの上にある間だけそれらのスタイルが適用されます。これはボタンとリンクがあなたがそれらを指すと小さな視覚的応答をする方法です。

css

.btn-primary:hover {
  background: purple;
}

/* キーボードユーザーは可視フォーカスインジケーターが必要 */
.btn-primary:focus-visible {
  outline: 2px solid rebeccapurple;
  outline-offset: 2px;
}

最初のルールはポインターがボタンの上にある間に発火します。2番目は、ボタンがキーボードで選択されたときにクリアなリングを描画し、これはページをマウスなしで使用可能に保つものです。ここでの色とアウトラインの選択はCSSがどのように機能するかとあなたが設定する値に接続します。任意のプロパティ。

Juno疑似クラス疑似クラスは要素を特定の状態でスタイル設定し、:hoverのような1つのコロンで書かれます。ポインターがそれの上にあるときのためにそれです。それはセレクターに直接付け、その間にスペースはありません。

疑似要素: 要素の一部をスタイル設定する

疑似クラスはある状態全体の要素をスタイル設定します。**疑似要素**は異なります。要素の一部をスタイル設定するか、HTMLに全くない小さなコンテンツを追加することができます。

最初に会う2つは::beforeと::afterです。それらは要素の開始時点の終了時点にコンテンツを挿入し、あなたはcontentプロパティを使用して何を挿入するかを伝えます。2つのコロンに注意してください。その二重コロンはCSSが疑似要素を疑似クラスから区別する方法です。

css

/* すべてのnavリンクの後に装飾矢印を追加 */
.nav a::after {
  content: " →";
  color: rebeccapurple;
}

/* 検索ボックス内のヒントテキストをスタイル設定 */
.search-input::placeholder {
  color: grey;
  font-style: italic;
}

::afterルールは矢印を挿入し、HTMLではなく、スタイリング内にのみ存在します。一方、::placeholderは入力内に到達して、ブラウザーが描画するテキストをスタイル設定します。どちらも平文セレクターで到達できないものをスタイル設定します。ヒントテキストとラベルをスタイル設定している場合、タイポグラフィー章はテキスト側についてさらに深く掘り下げています。

Juno疑似要素疑似要素は要素の一部をスタイル設定するか、少しのコンテンツを追加し、::beforeと::afterのような2つのコロンを使用します。これら2つは表示されるためにcontentプロパティが必要です。二重コロンは疑似要素を疑似クラスから分ける速い方法です。

詳細度: どのルールが勝つか

早かれ遅かれ2つのルールが異なる方法で同じ要素をスタイル設定しようとします。1つはテキストが青であると言い、別のものはそれが赤であると言います。ブラウザーは1つを選択する必要があり、決定する方法を**詳細度**と呼びます。より具体的なセレクターが勝ちます。

短いバージョンは強さの順です。IDセレクターはクラスセレクターを上回り、クラスセレクターは要素型セレクターを上回ります。だから、#headerと.titleの両方が同じ要素に色を設定する場合、IDが勝ちます。2つのルールが同じ詳細度の場合、ファイルの後半で記述されたものが勝ちます。

css

/* 要素型セレクター、詳細度 (0, 0, 1) */
p {
  color: grey;
}

/* クラスセレクター、詳細度 (0, 1, 0): このものが勝つ */
.intro {
  color: black;
}

html

<p class="intro">この段落はクラスルールが要素型ルールを上回るため、黒です。</p>

両方のルールは段落をターゲットにして両方がcolorを設定しますが、クラスセレクターは要素型セレクターより具体的なため、段落は黒です。1つのセレクターを詳細度ラダーの上または下に調整することは、より重いツールに頼ることなく競合を解決するためにしばしば必要なすべてです。ボックスモデル章は間隔ルールが衝突するときに同じカスケードに実行されます。

Juno詳細度 2つのルールが同じ要素をめぐって戦う場合、より具体的なものが勝ちます。IDはクラスを上回り、クラスは要素型セレクターを上回ります。それらが同じ詳細度の場合、ファイルの最後にあるものは何でも勝ちます。それはほぼすべての競合を説明しています。

CSSセレクター ​

要素型、クラス、ID セレクター ​

コンビネーター: 関係性によるセレクション ​

疑似クラス: 状態によるスタイル設定 ​

疑似要素: 要素の一部をスタイル設定する ​