CSS（Cascading Style Sheets）を使うと、ウェブページの見た目を変えることができます。フォントやカラー、スペーシング、全体のレイアウトなど、さまざまなデザインツールを自由に使うことができます。CSSは複雑な言語ですが、使い始めるにあたって理解すべき基本的な概念は2つだけです。

そのためには、ページのどの部分にスタイルが必要かを正確に把握することから始まります。

css = セレクタ + 宣言

CSSファイルには、HTMLファイルの形式を記述するための一連のルールが含まれています。それぞれのルールは、「何をスタイリングするか」と「どのようにスタイリングするか」の2つの部分から構成されています。最初の部分は、「セレクタ」と呼ばれる一連の用語を使って制御されます。

この記事の例では、スタイル宣言が含まれていますが、それらは焦点ではありません：セレクタそのものです。

歴史的に、CSSのセレクタには3つのレベル（またはバージョン）があり、ブラウザのサポートの程度はさまざまであった。CaniUseによると、2020年までに全世界の99％以上のユーザーがアクセスできるようになるという。

1段目セレクター

レベル1では、現在でも多くのシチュエーションをカバーする4種類の基本的なセレクターを紹介しています。

パターン	マッチ
電子	すべてのE素子
c	class="c" のすべての要素
#スティッキーバグ	id="myid "を持つ要素
これまで	要素Eに含まれる要素F
擬似クラス
E:リンク	過去に訪問したことのないページへのハイパーリンク
E:訪問されたのですか？	訪問したページへのハイパーリンク
E:活性化	現在選択されているハイパーリンク
疑似要素
E:: 1行目	要素Eの最初の書式設定行
E:頭文字	E 要素の最初のフォーマット文字

カテゴリーセレクター

最も単純なセレクタは「タイプセレクタ」で、段落や太字など、ある要素のすべてのインスタンスを対象とする。

p { margin-bottom: 0; }b { font-family: sans-serif; }

クラスセレクタ

class属性は、HTML要素に特定のタイプの段落などのセマンティクスを追加することができます。これらの要素は CSS で以下のように選択することができる。

.intro { font-weight: bold; }

このセレクターがマッチングします。

<p class="intro">…</p>

ただし、マッチングもすることに注意してください。

<ul class="intro">…</ul>

プロファイルの段落にのみ適用したい場合は、タイプセレクタとクラスセレクタを組み合わせて、次のようにします。

p.intro { font-weight: bold; }

セレクター

HTMLのid属性は、例えば、ドキュメント内でユニークである必要があります。

<div id="contents">…</div>

これは、idが "contents "である唯一の要素であるべきです。 idセレクタは、文書内の特定の要素をターゲットにすることができます。

#contents { color: #333; }

後付けセレクタ

このセレクタは他の2つのセレクタの間のスペースに関するものなので、厳密に言えばこれは「コンビネータ」です。DOMの概要で説明したように、htmlは階層的です。子セレクタは、ある要素を他の要素のコンテキストで識別できるようにするものです。

table b { font-weight: normal; }

擬似クラスと要素

擬似セレクタは、明示的に存在しないがまだ利用可能なクラスや要素を対象とする。

p::first-line { text-transform: uppercase; }

セレクターリスト

各ルールに同じルールセットを適用するには、セレクタをカンマで区切ってリストにまとめます。 の代わりに、「.

th { padding: 1em; }td { padding: 1em; }

と書けばいい。

th, td { padding: 1em; }

テ**ン

スタイルシートは、セレクタを使って要素をマッチングさせるルールの集合体ですが、複数のルールがある要素にマッチングする場合はどうなるのでしょうか。結果として得られる動作は「特異性」によって制御され、次のような状況で使われるルールを定義している。

p.intro { color: black; }p { color: gray; }

この場合、優先ルールはその特異性によって、以下のように定義される。

1. IDセレクタ（"contents"）が最も具体的である。
2. クラスセレクタ（`.author`）は、それほど特殊なものではありません。
3. タイプセレクタ(`p`)は、最も具体性のないものです。

special**の計算では、各レベルは、両方のセレクタがより高いレベルで同じスコアを持つ場合にのみ考慮されるので、「#contents」は「contents」よりも記事固有である。ニュースNo.特に前者については、IDセレクタで著者が「勝利」している。

セカンダリーセレクター

CSSセレクタの次のバージョンでは、属性セレクタの導入、擬似クラスと擬似要素の拡張、2つの新しいコンビネータの追加が行われています。

パターン	マッチ
*	任意の要素
E> F社	要素Fのサブ要素 要素E
株式会社E+F	要素Eの直前の要素F
アトリビュートセレクタ
E[foo]（エフー	foo "属性を持つE要素
E[foo="bar"]の場合	foo "属性が正確に "bar "であるE要素
E[foo~="ba"]です。	foo "属性がスペースで区切られた値の集合であり、そのうちの1つが "bar "であるE要素。
E[foo |="en"].	ハイフンで区切られた "en "で始まる値のリストを "foo "属性として持つE要素
擬似クラス
E:第一子	E要素, 親要素の第一子
E:lang（フランス語）	fr "言語におけるE要素
疑似要素
E:: 前	E要素の内容より前に生成された内容
E:: その後	E要素のコンテンツの後に生成されるコンテンツ

ワイルドカードセレクタ

は任意の要素にマッチします。通常はあまり役に立ちませんが、例えばデフォルトのマージンのいずれかをリセットしたい場合は、そのようにすることができます。

* { margin: 0; }

アトリビュートセレクタ

属性セレクタは、要素の属性によるスタイルの非常に明示的なフィルタリングを可能にする。

a[title] { text-decoration: underline dotted; }

サブコンビネーションワード：他のコンビネーションワードの直後にある要素

descendant combinator と似ているが、このコンビネータは直系の子孫にのみマッチし、ツリーより下の子にはマッチしない。例えば、"ul>li" は、ここでは "Section 1" のテキストにのみマッチし、"Section 1.1" にはマッチしない。

<ul><li>Section 1<ul><li>Section 1.1</li><li>Section 1.2</li></ul><li></ul>

隣接する兄弟姉妹の組み合わせ: 次のクラス

h1 + p { font-weight: bold; }

このセレクタは通常、特定のクラスを持たないコントロールマージンや導入段落に使用され、他の要素に続いている場合にのみ要素にマッチします。この例では、最初の段落のみがマッチングされ、2番目の段落はマッチングされません。

<h1>Contents</h1>some extra text<p>Introductory paragraph</p><p>Following paragraph</p>

このセレクタは、次の兄弟が何であるかを決定するとき、テキストではなく要素のみを考慮することに注意してください。

承継

CSS 特性の中には、祖先要素からその値を継承するものがある。実際には、例えばbody要素のフォントフェイスを設定すると、すべての段落、表なども同じフォントフェイスを使うことになる。

もちろん、これは期待通りなのですが、例えば「margin」という継承されないプロパティを考えてみましょう。すべての段落の余白や太字の文字が文書全体と同じになるのは困ります。

関連：10分で覚えられる簡単なCSSのコード例

目安としては、できるだけ多くの要素を対象とし、単純な「body」セレクタで済む場合はすべての要素を対象にしないことです。

3レベルセレクター

このレベルでは、より多くの擬似クラスが追加され、いくつかのプロパティセレクタと新しいコンビネータも追加されています。

パターン	マッチ
東洋無敗	要素Fが要素Eに先行する
アトリビュートセレクタ
E[foo^="bar"]の場合。	foo "属性が "bar "という文字列で始まるE要素。
E[foo$="bar"]です。	foo "属性の末尾が "bar "という文字列であるE要素
E[foo*="ba"]です。	foo "属性に "bar "という部分文字列が含まれるE要素。
擬似クラス
E:Root	ドキュメントのルートとなるE要素
E:第n子(n)	E要素で、親要素のn番目の子要素。
E:第n子(n)	E要素で、親要素の最後のものから数えてn番目の子要素。
E:n番目のタイプ(n)	E要素、そのn番目の兄弟姉妹
E:タイプ(n)の第n番目のエンディング	Eの要素で、最後の要素から数えてn番目の兄弟。
E:最後の子供	E要素、親要素の最後の子。
E:ファースト	E要素、その最初の兄弟
E:最後の1枚	最後の兄弟を持つE要素
E:一人っ子	E要素で、親要素の唯一の子要素。
E:専用です。	兄弟だけを持つE要素
E:エンプティ	子要素を持たないE要素（テキストノードを含む）
E:目的	参照されるURIのターゲットとなるE要素
E:イネーブル	有効なユーザーインターフェース要素 E
E:無効にする	無効化されたユーザーインターフェース要素 E
E:チェック済み	ユーザーインターフェースの1つの要素を調べたE
E:いいえ	単純なセレクタsにマッチしないE要素

アトリビュートセレクタ

a[href^="https:"], img[src$=".gif"], a[*="https:"] という属性で始まる要素を選択することができます。"値"]とする。

擬似クラス

その他の擬似クラスには、":last child", ":empty" (内容のない要素にマッチする) と ":checked" があり、これらは以下のような要素にマッチします。チェックボックスのような要素で、チェックされたときのみ表示されます。

一般的な兄弟姉妹の組み合わせ サブ：次の兄弟姉妹

レベル2の隣接兄弟コンビネータと同様、次の兄弟だけでなく、直後の兄弟にもマッチする。

h1 ~ p { font-size: 110%; }

css セレクタとその使い方

これで、CSSを使ってWebページの一部を選択する方法について、必要な知識はすべて身についたと思います。これで、色からレイアウトまで、さまざまなCSSプロパティを使用してページをスタイル設定する準備が整いました。

Photo credit: Pankaj Patel/Unsplash