Webエンジニア学習日記 CSS編 #03 「セレクター」

2023年4月30日

CSS 学習

eyecatch CSSのセレクターが理解するには、HTMLのタグの構造を理解しなければいけません。 でも、セレクターが分かれば、その後学習するJavascriptのDOM操作が非常にわかりやすくなるでしょう。 という事で、今回は、CSSのセレクターを徹底的に理解できる内容をレクチャーします。

CSSのセレクターの概要

CSSは、HTMLのタグに対して、装飾や特性の切り替えを行う処理です。 実際にどのタグに対して命令を適用させるかという、タグの指定をするのにセレクターを使って行います。 このセレクターが理解できたら、その後CSSは簡易に思えるでしょう。 でも、難しいポイント満載のセレクターなので、多くの人がつまづいてしまいます。 基礎も含めてちゃんと理解しておきましょう。

CSSのセレクターの種類

  1. タイプセレクター
  2. IDセレクター
  3. クラスセレクター
  4. 子孫セレクター
  5. 属性セレクター
  6. 擬似クラスセレクター
  7. 疑似要素セレクター

1. タイプセレクター

タイプセレクターは「タイプ」という名前ですが、「HTMLタグ」の事です。 <p>sample-title</p> このHTMLに対して、 p { color: red; } このように指定すると、Pタグに対して、文字色を赤に変更する命令になります。

2. IDセレクター

IDセレクターは、ID属性が設定されている、HTMLタグが選択されます。 <p id='header'>sample-title</p> #header { background-color: blue; } ちなみに、id属性は、ページ内では、同じ値は他では使えないというルールがあります。 CSSでのIDセレクターは、問題なく機能してしまいますが、HTMLバリデーションエラーとして、w3c規定では、エラー扱いになります。 Javascriptで操作をする時には、不具合につながるので、複数セットする値の場合は、class属性で書き込むようにしましょう。

3. クラスセレクター

クラスセレクターは、指定されたclass属性の値を持っているHTMLタグを全て選択します。 <p class='highlight'>sample-title</p> .highlight { font-weight: bold; } 一番スタンダードな使い方なので、覚えやすいでしょう。

4. 子孫セレクター

子孫セレクターは、HTMLのDOM構造の下階層に向かって選択をします。 <div> <ul> <li><a class='step-1' href='#step-1'>STEP_1</a></li> <li><a class='step-2' href='#step-2'>STEP_2</a></li> <li><a class='step-3' href='#step-3'>STEP_3</a></li> </ul> </div> 子供選択 ul > li { list-style: none; } ulタグの直下にある子要素のliタグのみ選択されます。 隣接兄弟選択 li.step-1 + li.step-2{ font-weight:bold; } liタグのstep-1というクラスのすぐとなりに隣接する、step-2のクラス属性(.step-1の直後に.step-2がある場合)が選択されます。 一般兄弟選択 li.step-1 ~ li.step-3{ font-weight:bold; } liタグのstep-1というクラスと同じ階層で、後ろに書かれている、.step-3が選択されます。 上記サンプルのように、複数のセレクターをつなげて使う方法を「結合」という風にも呼ばれます。 参考書などに書かれていることも多いので、覚えておきましょう。

5. 属性セレクター

属性セレクターは、HTMLタグに書かれている属性(または、javascriptで書き換えられた属性)を判別して、選択することができます。 <a href="http://example.com">Example</a> <a href="http://myntinc.com">Myntinc</a> a[href="http://example.com"] { color: green; } サンプルコードは、href属性が"http://example.com"という文字列を設定されているタグが選択されます。

6. 擬似クラスセレクター

<a href='https://google.com'>Google検索</a> visited : 既に訪れたことがあるリンク a:visited { color: purple; } hover : 要素の上にマウスが乗った時 a:hover { color: purple; } empty : 要素の中身が空の時 a:empty { color: purple; } 実際にセットしたcssの挙動を、自分でコードを書いて確認してみよう!

7. 疑似要素セレクター

サンプル要素
要素の手前に擬似要素を作る div::before { content: 'beforet-selector'; color:red; } 要素の後ろに擬似要素を作る div::after { content: 'after-selector'; color:blue; }

上記の組み合わせ

CSSは、上記のセレクターを組み合わせることで、ほぼ全ての要素を選択することが可能になります。 そして、今回紹介したセレクターは、まだまだ氷山の一角で、もっと便利に使えるセレクターはたくさんあります。 以下のリンク集を参考に、知らないセレクターを自分で書いて実験してみると、簡単に習得できるでしょう。

リンク集

CSSセレクタのチートシート|37パターンを一覧で解説 図解でわかりやすくセレクターを解説しています。 CSS Selector Reference 全てじゃないですが、CSSセレクターの一覧が掲載されています。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。