指定方法
HTML要素の指定方法は幾つかある
| 指定内容 |
記載方法 |
備考 |
| 全ての要素 |
*{} |
|
| 要素名で指定 |
要素名{} |
|
| ID名で指定 |
#ID名{} |
|
| クラス名で指定 |
.クラス名{} |
|
| 特定の条件で指定 |
要素名:疑似クラス{}(※1) |
|
| 属性名で指定 |
要素名[属性名] |
|
| 属性情報で指定 |
要素名[属性名~=値]等(※2) |
CSS3 |
(※1)疑似クラス
キリが無いので代表的なものだけ記載。詳しくは
こちらを参照。
| 疑似クラス |
解説 |
備考 |
| before,after |
要素の前後のスタイルを定義できる |
|
| active |
クリック中等アクティブな要素にスタイルを定義できる |
|
| focus |
フォーカス中の要素にスタイルを定義できる |
|
| hover |
マウスが要素の上にホバーしている時のスタイルを定義できる |
|
| link |
未訪問のリンクのスタイルを定義できる |
|
| visited |
訪問済リンクのスタイルを定義できる |
|
| checked |
チェッック状態の要素のスタイルを定義できる |
|
| first-child,last-child |
最初/最後の子要素にスタイルを定義できる |
|
| nth-child(n) |
n番目の子要素にスタイルを定義できる |
|
| nth-of-type(n) |
n番目の特定要素の子要素にスタイルを定義できる |
|
| enabled |
有効になっている要素 |
CSS3 |
| disabled |
無効になっている要素 |
CSS3 |
| checked |
チェックされている要素 |
CSS3 |
| not() |
()で囲ったものの条件に合致しない要素 |
CSS3 |
(※2)[]内の指定には以下のようなものがある。
| = |
指定値と一致する属性名 |
| ^= |
指定値から始まる属性名 |
| $= |
指定値で終わる属性名 |
| *= |
指定値を持つ属性名 |
優先順位
なお複数条件ともに合致する場合の優先順位は以下の通り。
important! > idセレクタ > classセレクタ > タイプセレクタ > 後で記述されたもの
正確にはそれぞれの条件に応じた点数計算が行われる。
点数付けについては、以下も参考にされたし。
最終更新：2019年06月22日 13:58
