【初心者対象】超基礎的なCSSセレクタの種類一覧

“基本も基本…大原則だっ…!”

by 伊藤開司(マンガ:賭博黙示録カイジ)

basic-selector

CSS3では、かなり小技の効いた擬似要素などのセレクタが追加されました。

それらを知ることも大切ですが、まずは基本であるCSS1・CSS2レベルを押さえておくことが肝要。

押さえておかないと、例えばテンプレートのちょっとしたカスタマイズを行うことすらできなってしまうからです。

今日は、超基本的なCSSセレクタを、例を交えて紹介します。

なお「セレクタって何ぞや?」という方は、こちらの投稿を合わせて参照ください。

要素型セレクタ

E

指定したE要素に対して適用、おなじみかと思います。

下記HTMLの場合、pタグ内のテキストカラーが変化します。

子孫セレクタ

E F(どんどん深く指定可能)

指定したE要素よりも、下位の階層にあるすべてのF要素に適用します。

子供セレクタ

E > F(どんどん深く指定可能)

指定したE要素の直下にあるすべてのF要素に適用します。

全称セレクタ

*(アスタリスク)

HTMl内のすべての要素に対して適用します。

idセレクタ

#foo または E#foo

id属性名を付けた要素に適用します。

classセレクタ

.foo または E.foo

class属性名を付けた要素に適用。一番汎用的と言えるかもしれません。

.foo.hoge (複数のセレクタ)

複数のclass属性名が、指定されている要素のみに適用させることも可能。個人的にANDセレクタとか呼んでいます。
(※そのような名前は、ありません)

idセレクタ

#foo または E#foo

id属性名を付けた要素に適用します。

隣接兄弟セレクタ

E + F

要素と要素が直接隣接している場合において、直後の弟要素に適用します。
ちなみに兄弟とは、親要素が同じになる要素同士のことです。

セレクタには、この他にも属性セレクタ、擬似要素、擬似クラスと呼ばれるものが存在します。
これらについては、CSS3レベルも含めて次回以降紹介したいと思います。

※属性セレクタの一覧は、こちらの記事(【サンプル有】入門からCSS3まで!属性セレクタリファレンス)に掲載しました。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply