CSSセレクターとは？

JavaScript学習で、「CSSセレクター」という用語がたまに出てきます。

CSSセレクターについてまとめておきます。（メモ）

CSS

CSSとは？－CSSの基本

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。

CSSは、HTMLと組み合わせて使用する言語です。

HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

CSSとは？これを読めば初心者でも必ずCSSが書ける！｜Udemy メディア

CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。

CSSを適応したいタグ（上図ではh1）のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「値」と呼びます。

CSSの基本-スタイルシートの記述方法

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

このように、「何に」 （セレクタ）、「何を」 （プロパティ）、「どのように」 （値） 適用するかを宣言していきます。

セレクタはスタイルを宣言したい対象 （範囲） を記述します。

• CSSは、「カスケーディング・スタイル・シート」の略
• CSSは、HTML文書の見た目（装飾）を設定するための言語
• CSSは、「セレクター」「プロパティー」「値」の組合せで書く

セレクターとは？

selectorの意味 – 英和辞典 Weblio辞書

selectorとは

選ぶ人、選択者、選別機、(オートマチック車の)変速レバー、(ギヤ)セレクター

英語の「selector」には、「select（選ぶ）するもの」という意味があります。

「CSSセレクター」と言った場合、「CSSの選択者」というような意味でしょうか？

CSSセレクター

CSSの「セレクター」とは、CSSを適用する対象のことですね？

h1 { color: red; }

セレクタとはスタイルを適用する対象を指定するものです

• h1 …　セレクタ
• color …　プロパティ
• red …　(プロパティの)値

CSSの文法で、CSSの構成要素は、

1. セレクター
2. プロパティー
3. 値

の３つの組合せで記述されます。

1. Where （どこに）　→　セレクター
2. What （何を）　→　プロパティー
3. How （どのように）　→　値

という３つを指定します。

CSSを適用する対象＝「どこに（Where）」を指定する項目が、CSSの「セレクター」です。

CSSセレクターの分類

CSSのセレクターは、対象の種類によって、いろいろ分類されていました。

• 要素型セレクター（タイプセレクター）
• IDセレクター
• クラスセレクター

など、いろいろ分類されています。

要素セレクター（タイプセレクター）

スタイルを適用する対象が、HTML要素（HTMLタグで囲まれた部分）であるセレクターを、「要素セレクター」（タイプセレクター）と言います。

要素型セレクタ（タイプセレクタ）－スタイルシートリファレンス

要素型セレクタ（タイプセレクタ）は、要素名で対象を指定してスタイルを適用する基本的なセレクタです。

HTMLタグとHTML要素の違い

「htmlタグ」と「html要素」の違い- M2制作

HTMLタグで囲まれた部分がHTML要素ですね。

CSSで要素セレクターはなるべく使わない

極力、タイプセレクタを使わない – < /gecko >

僕は、タイプセレクタ（ E { … } ）をたくさん使うCSSはあまり好きじゃありません。

ようは、親要素に応じて、スタイルが変化するわけです。

そのたびにCSSを書き換える？？

HTMLの構造や、要素が変わる可能性がゼロとは言い切れません。

そういった変化に弱いCSSは書きたくないものです。

まとめ

基本的には、 「作成するもの全ての要素にclass属性値を付与し、すべてクラスセレクタで書き、どんな要素に指定されても同じ振る舞いをする」 ように作るのが理想だと思っています。

(p.31)

2-2　セレクタのリファクタリング

セレクタをより安全でシンプルなものに

HTMLに依存したセレクタをもっとシンプルに、そしてより安全なセレクタへと最適化することができます。

要素セレクタを省略する

よく要素セレクタとクラスセレクタの組み合わせを書くことがあります。

その意図は、おそらくセレクタが表す通り、次のようなものかもしれません。

• タイトルとして強調するh2要素
• リンク一覧となるul要素

しかしこうした要素を指定することは詳細度を高めるだけに過ぎず、セレクタとしては省略しても問題ないはずです。

もしマークアップとCSSの関係を明示したいのであれば、セレクタでそれを表すのではなく、コメントで表現するほうが、セレクタの詳細度を上げずに、別の開発者に意図を伝えることができます。

.title { /* h2要素に適用する */
    font-size: 1.4em
    font-weight: bold;
}
/* ul */.link-list li {
    padding-left: 20px;
    background: url(bullet.png) no-repeat left center;
}

ただし多くの場合、そうした要素を指定すること自体にもメリットはさほどなく、デザインやマークアップの変更によって要素が変わってしまうこともあるので、コード例にあるような「このクラスはh2要素に適用する」のようなガイドは不要かもしれません。

実際にはh2要素でなくとも、h1要素やh3要素でも機能するようにすべきです。

• デザインやHTMLは変更されることもあるので、要素セレクターはなるべく使わない。
• 要素セレクターの代わりに、クラスセレクターなどを活用する。

まとめ

• CSSは、HTML文書を装飾する言語
• CSSは、「セレクター」「プロパティー」「値」の３つの組合せで記述
• CSSセレクターは、CSSを適用する対象を指定する項目
• CSSセレクターは、適用する対象によって、様々な種類に分類されている
• CSSセレクターには、要素セレクター、IDセレクター、クラスセレクターなどの種類がある
• 要素セレクターは、HTML要素（HTMLタグで囲まれた部分）に適用されるセレクター（別名「タイプセレクター」）
• デザインやHTMLは変更されることもあるので、要素セレクターはなるべく使わない

CSSの用語を理解して、CSSの使い方に慣れるようにしたいです。

投稿日：May 13th 2017

元記事：http://jsstudy.hatenablog.com/entry/css-selector