基本セレクター
全称セレクター
すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
構文
* { スタイルプロパティ }
文書内の全ての要素にスタイルを適用します。
CSS3からは、アスタリスクは 名前空間 と組み合わせて利用できるようになりました。
namespace | *
名前空間 namespace の中ですべての要素にマッチします|
すべての要素にマッチします| *
名前空間が宣言されていないすべての要素にマッチします
サンプル
See the Pen 全称セレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
要素型セレクター
要素型セレクターは、ノード名で要素をマッチさせます。つまり、文書内にある指定された型の要素をすべて選択します。
構文
element_name { スタイルプロパティ }
指定した名称のHTML要素全てにスタイルを適用します。
サンプル
See the Pen 要素型セレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
クラスセレクター
クラスセレクターは class 属性の内容に基づいて、要素を選択します。
構文
.class_name { スタイルプロパティ }
指定したクラス名の付与されているHTML要素全てにスタイルを適用します。
サンプル
See the Pen クラスセレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
IDセレクター
クラスセレクターは id 属性の内容に基づいて、要素を選択します。
構文
#identify_name { スタイルプロパティ }
指定したID名の付与されているHTML要素全てにスタイルを適用します。
サンプル
See the Pen IDセレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
属性セレクター
属性セレクターは、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。
構文
[attr]
attrという名称の属性を持つ要素を全て選択します。属性値は問いません。
[attr=value]
attrという名称の属性を持ち、属性値が valueと正確に一致する要素を全て選択します。
[attr~=value]
attrという名称の属性を持ち、属性値が valueと正確に一致する要素を全て選択します。空白区切りの語のリストの形で、複数の value を含めることができます。
[attr|=value]
attrという名称の属性を持ち、属性値が valueと正確に一致するか、valueで始まり、直後に”-“(ハイフン)を持つ要素を全て選択します。
[attr^=value]
attrという名称の属性を持ち、属性値が valueで始まる要素を全て選択します。
[attr$=value]
attrという名称の属性を持ち、属性値が valueで終わる要素を全て選択します。
[attr*=value]
attrという名称の属性を持ち、属性値に valueという文字列を含む要素を全て選択します。
[attr operator value i]
閉じ角括弧の前に i (または I) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。
[attr operator value s]
閉じ角括弧の前に s (または S) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別してに比較されます。
サンプル
See the Pen 属性セレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
グループ化セレクター
セレクターリスト
セレクターをカンマ区切りで列挙することで、異なる複数のセレクターに同じスタイルを適用することができます。
構文
selector1 , selector2, selector3 { スタイルプロパティ }
サンプル
See the Pen XWjGXwX by Masahiko Iwakiri (@m-iwakiri) on CodePen.
結合子
子孫結合子
子孫結合子は、通常１つの半角スペースで記述します。子孫結合子は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。
構文
parent children { スタイルプロパティ }
”parent” に記述したセレクターと一致する要素を祖先に持ち、”children”に記述したセレクターと一致する要素を選択します。
サンプル
See the Pen 子孫セレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
子結合子
子結合子”>”(半角大なりイコール) は2つの CSS セレクターの間に配置されます。2つ目のセレクターが1つ目のセレクターの直接の子要素の場合にのみマッチします。
構文
parent > children { スタイルプロパティ }
”parent” に記述したセレクターと一致する要素を直接の親に持ち、”children”に記述したセレクターと一致する要素を選択します。
サンプル
See the Pen 子セレクター by Masahiko Iwakiri (@m-iwakiri) on CodePen.
一般兄弟結合子
一般兄弟結合子”~”(半角チルダ) は2つの CSS セレクターの間に配置されます。1つ目のセレクターと2つ目のセレクターが同じ親を持つ兄弟要素であり、1つ目のセレクターよりも後に記述されていて、2つ目のセレクターと合致するものが選択されます。
構文
sibling1 ~ sibling2 { スタイルプロパティ }
”sibling2” に記述したセレクターと一致する要素のうち、”sibling1″と同じ親を持ち、なおかつ、”sibling1″よりも後に記述された要素を選択します。
サンプル
See the Pen 一般兄弟結合子 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
隣接兄弟結合子
隣接兄弟結合子”+”(半角プラス記号) は2つの CSS セレクターの間に配置されます。1つ目のセレクターと2つ目のセレクターが同じ親を持つ兄弟要素であり、1つ目のセレクターの直後に記述されていて、2つ目のセレクターと合致するものが選択されます。
構文
sibling1 ~ sibling2 { スタイルプロパティ }
”sibling2” に記述したセレクターと一致する要素のうち、”sibling1″と同じ親を持ち、なおかつ、”sibling1″の直後に記述された要素を選択します。
サンプル
See the Pen 隣接兄弟結合子 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
擬似表記
擬似クラス
擬似クラスはセレクターに付加するキーワードで、選択された要素に対して特定の状態（マウスポインターが要素上にある、訪問済のリンクである、など）を指定します。
構文
selector:pseudo-class { スタイルプロパティ }
サンプル
See the Pen MWjxZvL by Masahiko Iwakiri (@m-iwakiri) on CodePen.
擬似要素
擬似クラスはセレクターに付加するキーワードで、選択された要素の特定の部分（要素の１行目など）にスタイル付けできるようにするものです。
構文
selector::pseudo-elm { スタイルプロパティ }
サンプル
See the Pen 擬似要素 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント