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

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, Web制作 ,


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

関連記事

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

[Dreamweaver] サイトタイトルを入力する枠を広げる!

デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]

完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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