CSSセレクターを使用してWebページの一部をターゲットにする方法

カスケードスタイルシート(CSS)を使用すると、Webページの外観を変えることができます。フォントや色から間隔や全体的なレイアウトまで、あらゆる種類のデザインツールをすぐに利用できます。 CSSは全体として複雑な言語ですが、始めるために理解する必要のある基本的な概念は2つだけです。

それはすべて、ページのどの部分をスタイリングするかを正確に特定することから始まります。

CSS =セレクター+宣言

CSSファイルには、HTMLファイルのフォーマット方法を説明する一連のルールが含まれています。各ルールは、スタイルを設定する方法とスタイルを設定する方法の2つの部分で構成されます。最初の部分は、「セレクター」と呼ばれる一連の用語を使用して制御されます。

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

歴史的に、ブラウザのサポートの程度が異なる3つのCSSセレクタレベル(またはバージョン)がありました。 Can I Useによると、2020年には、これらはすべて世界中の99%以上のユーザーが利用できます。

レベル1セレクター

レベル1では、今日でも膨大な数のケースをカバーする4つの基本的なタイプのセレクターが導入されました。

パターンマッチス
EすべてのE要素
.c class = "c"のすべての要素
#myid id = "myid"の要素
EF E要素内のF要素
疑似クラス
E:link以前にアクセスしたことのないページへのハイパーリンク
E:visitedすでにアクセスしたページへのハイパーリンク
E:active現在選択されているハイパーリンク
疑似要素
E::first-line E要素の最初のフォーマットされた行
E::first-letter 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; }

IDセレクター

HTML id属性は、ドキュメント内で一意である必要があります。たとえば、次の場合です。

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

これは、「コンテンツ」IDを持つ唯一の要素である必要があります。 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`)は最も具体的ではありません。

特異性を計算するとき、各レベルは2つのセレクターが上位レベルで同じスコアを持っている場合にのみ考慮されます。したがって、「#contents」は「article.newsp.author.special」よりも具体的です。前者はIDセレクターで「勝つ」からです。

レベル2セレクター

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

パターンマッチス
*任意の要素
E > F E要素の子であるF要素
E + F E要素の直前のF要素
属性セレクター
E[foo] 「foo」属性を持つE要素
E[foo="bar"] 「foo」属性が正確に「bar」であるE要素
E[foo~="bar"] 「foo」属性が空白で区切られた値のリストであり、そのうちの1つが「bar」であるE要素
E[foo|="en"] 「foo」属性に「en」で始まる値のハイフン区切りリストがあるE要素
疑似クラス
E:first-child E要素、その親の最初の子
E:lang(fr)言語「fr」のタイプEの要素
疑似要素
E::before E要素のコンテンツの前に生成されたコンテンツ
E::after E要素のコンテンツの後に生成されたコンテンツ

ユニバーサルセレクター

「*」はどの要素にも一致します。それほど便利なことではありませんが、たとえば、デフォルトのマージンをリセットする場合は、次のようにすることができます。

 * { margin: 0; }

属性セレクター

属性セレクターを使用すると、スタイルを非常に具体的にターゲットにして、要素の属性でフィルター処理できます。

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

子コンビネータ:別の要素のすぐ内側にある要素

子孫コンビネータに似ていますが、これは直接の子にのみ一致し、ツリーの下の子孫には一致しません。たとえば、「ul> li」は、ここでは「セクション1」のテキストのみに一致し、「セクション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」要素のフォントフェースを設定することは、すべての段落、表なども同じフォントフェースを使用することを意味します。

もちろん、これはまさにあなたが期待することですが、継承しないプロパティ、たとえば「マージン」を考えてみてください。個々の段落や太字のテキストのすべてに、ドキュメント全体と同じマージンを持たせたくはありません。

関連: 10分で学ぶことができる簡単なCSSコード例

経験則としては、一般的に意味のある要素をターゲットにすることです。単純な「ボディ」セレクターで行う場合は、個々の要素すべてをターゲットにしないでください。

レベル3セレクター

このレベルでは、いくつかの属性セレクターと新しいコンビネーターとともに、さらに多くの疑似クラスが追加されました。

パターンマッチス
E ~ F E要素が前にあるF要素
属性セレクター
E[foo^="bar"] 「foo」属性が文字列「bar」で始まるE要素
E[foo$="bar"] 「foo」属性が文字列「bar」で終わるE要素
E[foo*="bar"] 「foo」属性に部分文字列「bar」が含まれるE要素
疑似クラス
E:root E要素、ドキュメントのルート
E:nth-child(n) E要素、その親のn番目の子
E:nth-last-child(n)親のn番目の子であるE要素(最後の要素から数えて)
E:nth-of-type(n) E要素、そのタイプのn番目の兄弟
E:nth-last-of-type(n) E要素、そのタイプのn番目の兄弟、最後の要素から数えて
E:last-child E要素、その親の最後の子
E:first-of-type E要素、そのタイプの最初の兄弟
E:last-of-type E要素、そのタイプの最後の兄弟
E:only-child E要素、その親の一人っ子
E:only-of-type E要素、そのタイプの兄弟のみ
E:empty子を持たないE要素(テキストノードを含む)
E:target参照元URIのターゲットであるE要素
E:enabled有効になっているユーザーインターフェイス要素E
E:disabled無効になっているユーザーインターフェイス要素E
E:checkedチェックされるユーザーインターフェイス要素E
E:not(s)単純なセレクターと一致しないE要素

属性セレクター

指定された値で始まる属性: a[href^="https:"] 、指定された値で終わる要素: img[src$=".gif"] 、または値を含む要素を選択できます: a[*="value"]

疑似クラス

追加の疑似クラスには、「:last-child」、「:empty」(コンテンツのない要素に一致する)、およびチェックボックス入力のような要素に一致する「:checked」が含まれますが、チェックされている場合のみです。

一般的な兄弟コンビネータ:次の兄弟

レベル2の隣接する兄弟コンビネータと同様に、これは次の兄弟だけでなく、次の兄弟と一致します。

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

CSSセレクターとその使用方法

これで、CSSを使用してWebページの一部を選択する方法について知っておくべきことがほぼすべてわかりました。これで、色からレイアウトまですべてをカバーする多種多様なCSSプロパティを使用してページのスタイルを設定する準備が整いました。

画像クレジット:Pankaj Patel / Unsplash