CSSの書き方

CSSの書き方について

○CSS のコメントの書き方

CSS のコメントは /* */ で囲まれた部分のみです。

/* これが CSS のコメント */

○CSS のセレクタ

CSS セレクタ マッチする箇所
h1 { } h1 要素
h1, h2 { } h1 と h2 要素
p.photo { } photo クラスを適用している p 要素
.photo { } photo クラスを適用している要素
div#photo { } photo ID を適用している div 要素
#photo { } photo ID を適用している要素
p strong { } p 要素の中の strong 要素
p > strong { } p 要素直下の strong 要素
ul + p { } ul 要素直後の p 要素 ( IE6:NG )

○擬似クラス
CSS セレクタ マッチする箇所
ul > li:first-child { } ul の最初の子要素である li 要素 ( IE6:NG )
属性セレクタ

CSS には、属性が一致した時にスタイルを適用する [ 属性セレクタ ] なるものがあるらしい。 実際に試してはいませんが、とりあえずメモ。 なんで参考程度に。
CSS セレクタ マッチする箇所
a[href$=”.pdf”] { } PDF へのリンク。 後方一致。
応用すれば PDF へのリンクにアイコンが付けれるかも?
a[href=”#top”] { } top へのリンクを持つ a 要素 ( IE6:NG )
img[src*=”hoge”] { } ファイルパスに「hoge」を含む画像。 部分一致。
img[src^=”http”] { } 絶対パスで書かれた画像。 前方一致。
応用すれば別サイトの画像をはじけるかも?

[ CSS ] CSS の文法まとめ