📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 111行目: | 111行目: | ||
! セレクタ名 !! 選択するもの !! 例 | ! セレクタ名 !! 選択するもの !! 例 | ||
|- | |- | ||
| 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p<br> | | 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p<br><nowiki><p></nowiki> | ||
|- | |- | ||
| IDセレクタ || 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id<br> | | IDセレクタ || 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id<br><nowiki><p id="my-id"></nowiki><br><a id="my-id"> | ||
|- | |- | ||
| クラスセレクタ || 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 || .my-class<br> | | クラスセレクタ || 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 || .my-class<br><nowiki><p class="my-class"></nowiki><br><a class="my-class"> | ||
|- | |- | ||
| 属性セレクタ || 指定された属性を持つページ上の要素 || img[src]<br> | | 属性セレクタ || 指定された属性を持つページ上の要素 || img[src]<br><img src="myimage.png"><br><br><img>のみは不可 | ||
|- | |- | ||
| 擬似クラスセレクタ || 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) || a:hover<br><br> | | 擬似クラスセレクタ || 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) || a:hover<br><br><a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。 | ||
|} | |} | ||
</center> | </center> | ||
<br> | <br> | ||
さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br> | さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br> | ||
<br> | |||
==== 要素セレクタ ==== | |||
要素セレクタは、一般的には使用されない。<br> | |||
<br> | |||
要素セレクタを避ける理由として、以下に示すものが挙げられる。<br> | |||
* 詳細度が低すぎて上書きが必要になりやすい。 | |||
* スコープが広すぎるため、予期せぬ影響が出やすい。 | |||
* コンポーネント指向の設計と相性が悪い。 | |||
* クラスセレクタよりも処理が遅いため、パフォーマンスへの悪影響がある。 | |||
<br> | <br> | ||
==== IDセレクタ ==== | ==== IDセレクタ ==== | ||