[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
CSSセレクタとは?
CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、CSSセレクタをじっくり復習していきます。
CSSセレクタとは、普段から何気なく使っている
.hoge{ padding:10px; margin:20px 0 10px; } p{ font-size:12px; }
この.hogeや、pなどがそれに当たります。
あまりこれがセレクタだとは認識してないですよね?
それでは、各種セレクタを見ていきましょう。
「*」全ての要素に適用
よく、リセット系のCSSで真っ先に使われるのがこの*(アスタリスク)です。
これは、全ての要素に適用されるため、使い方を間違えると、かなり面倒な事になります。
僕は個人的にあまりオススメはしませんし、僕個人は基本的に使いません。
では、使い方です。
*{ margin:0; padding:0; } p *{ text-decoration:underline; }
このように、全ての要素に適用することもできますし、p以下の全てという風にすることもできます。
タグ等は関係なく全てということなので、慎重につかいましょう。
.hoge(classセレクタ)と#hoge(IDセレクタ)
classセレクタとidセレクタは、ほとんど同じようなものなのでまとめて説明します。
両方とも同じで、指定したclassまたはidにスタイルを適用するものです。
.hoge{ margin:0; padding:0; } #hoge{ font-size:12px; margin:10px 0; }
指定の仕方で、どのタグかを限定することもできます。
上記の方法では、hogeというクラスまたはid全てに適用されます。
p.hoge{ margin:0; padding:0; } div#hoge{ font-size:12px; margin:10px 0; }
こうすることで、タグを限定してスタイルを適用できます。
この場合、pタグのクラス(hoge)の場合、divタグのid(hoge)の場合のみスタイルが適用されます。
A B(子孫要素セレクタ)
子孫要素セレクタは、Aタグの中のBタグにスタイルを適用します。
半角スペースで区切れば何階層でもいけますが、複雑になりますので、極力少ない階層で指定しましょう。
div p{ font-size:16px; }
このように、divの中にあるpタグという風に指定出来ます。
もちろん、classやidセレクタと併用もできます。
A > B(子要素のみに適用)
セレクタの間に > を入れるとAの中にある子要素Bにのみスタイルを適用出来ます。
p > span{ color:red; }
こういう風に使います。
A + B(隣接セレクタ)
これは、Aという要素と隣り合っている要素に対して適用されます。
したがって、AのとなりにBがあり、そのとなりにCがあっても、Bまでしか適用されません。
h2 + p{ margin:0; }
こういう風に使います。
A ~ B(後にある要素に適用)
これは、CSS3のセレクタですが、Aとうい要素の後にあるBという要素に適用されます。
h2 ~ p{ color:red; }
こういう風に使います。
適用されるのは子要素のみですので、孫要素に対しては適用されません。
まとめ
いかがでしたでしょうか。
今回は、セレクタのみを紹介しましたが、セレクタだけでも結構たくさんあり、使い方次第で、いろいろな指定をできます。
次回は、疑似クラス・疑似要素を紹介します。
ad
関連記事
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重