CSSで使えるセレクタ
CSSで使えるセレクタの種類には様々なものがありますが、HTMLに馴染みのある方なら、普段使っているものなので見慣れているはずですよね！全てのセレクタを覚える必要は無く、自分が良く使うものを覚えておけば良いでしょう。
セレクタ一覧
| セレクタ | 説明 | IE6 | IE7 | Fx2 | Op9.1 | Sf2 |
| 要素名 | 指定した要素 | ○ | ○ | ○ | ○ | ○ |
| * | 全ての要素 | ○ | ○ | ○ | ○ | ○ |
| #ID名 | 指定したid | ○ | ○ | ○ | ○ | ○ |
| .クラス名 | 指定したclass | ○ | ○ | ○ | ○ | ○ |
| :link | リンク(未キャッシュ) | ○ | ○ | ○ | ○ | ○ |
| :visited | リンク(キャッシュ済) | ○ | ○ | ○ | ○ | ○ |
| :hover | オンマウス時 | ○ | ○ | ○ | ○ | ○ |
| :active | リンク(現在開いている) | ○ | ○ | ○ | ○ | ○ |
| A B | Aの子孫であるBに適用 | ○ | ○ | ○ | ○ | ○ |
| A > B | Aの子であるBに適用 | × | ○ | ○ | ○ | ○ |
| A + B | Aの直後にある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 B | Aの子孫であるBに適用 | #box img { width: 200px;} |
| A > B | Aの子であるBに適用 | #box > a { font-size: small;} |
| A + B | Aの直後にある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で使える単位も覚えておきましょう≫
戻る
