CSSで使えるセレクタ

CSSで使えるセレクタの種類には様々なものがありますが、HTMLに馴染みのある方なら、普段使っているものなので見慣れているはずですよね!全てのセレクタを覚える必要は無く、自分が良く使うものを覚えておけば良いでしょう。

セレクタ一覧

セレクタ説明IE6IE7Fx2Op9.1Sf2
要素名指定した要素
*全ての要素
#ID名指定したid
.クラス名指定したclass
:linkリンク(未キャッシュ)
:visitedリンク(キャッシュ済)
:hoverオンマウス時
:activeリンク(現在開いている)
A BAの子孫であるBに適用
A > BAの子であるBに適用×
A + BAの直後にあるBに適用×
[属性]指定した属性×
[属性="値"]指定した属性と値×
[属性~="値"]指定した属性と値(空白区切り)×
:before要素の前に追加××
:after要素の後に追加××

セレクタ使用例

セレクタ説明使用例
要素名指定した要素 h1 { color: #ff0000;}
*全ての要素 * { margin: 0px;}
#ID名指定したid #box { border: 1px solid #0066ff;}
.クラス名指定したclass .box { border: 1px solid #0066ff;}
:linkリンク(未キャッシュ) a:link { font-size: 12px;}
:visitedリンク(キャッシュ済) a:visited { font-weight: bold;}
:hoverオンマウス時 a:hover { text-decoration: none;}
:activeリンク(現在開いている) a:active { background-color: #ff6600;}
A BAの子孫であるBに適用#box img { width: 200px;}
A > BAの子であるBに適用#box > a { font-size: small;}
A + BAの直後にあるBに適用p + em { font-size: 120%;}
[属性]指定した属性 a[href][title] { cursor: help;}
[属性="値"]指定した属性と値input[type="text"]{ font-family: monospace;}
[属性~="値"]指定した属性と値(空白区切り) a[rel~="help"] { cursor: help;}
:before要素の前に追加 p.special:before { content: "Special!";}
:after要素の後に追加 p.special:after { content: "Special!";}

CSSで使える単位も覚えておきましょう≫

戻る

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img