クラスセレクタ

.クラス名
以下のサンプルは指定したクラス名の属性を赤に設定します。
適用されない 適用される 適用されない

IDセレクタ

#ID名
以下のサンプルは指定したID名の属性を赤に設定します。
適用されない 適用される 適用されない

複数セレクタ

,で区切ると複数のタグやクラスをまとめて適用できます。

全要素

*で全要素に適用できます。

指定した親要素の指定した子要素(孫要素を含む)に適用

親要素 子要素
以下のサンプルは指定した親要素(クラスで指定)の中の子要素(孫要素も含む)(クラスで指定)を赤に設定します。
適用される
適用されない

子セレクタ{指定した親要素の指定した子要素(孫要素は含まない)に適用}

親要素 > 子要素
以下のサンプルは指定した親要素(クラスで指定)の中の子要素(孫要素は含まない)(クラスで指定)を赤に設定します。
適用される
適用されない
適用されない

指定した要素に隣接している要素1個に適用

親要素+隣接要素
以下のサンプルは指定した要素(クラスで指定)に隣接する同階層の後ろに並ぶ要素1個を赤に設定します。
適用されない
適用される 適用されない

指定した要素に隣接している要素複数に適用

親要素~隣接要素
以下のサンプルは指定した要素(クラスで指定)に隣接し同階層の後ろに並ぶ要素を赤に設定します。
適用されない
適用される 適用される

指定した要素の最初の要素に適用

要素:first-child
以下のサンプルは指定した要素(クラスで指定)の最初の要素を赤に設定します。
適用される 適用されない

指定した要素の最後の要素に適用

要素:last-child
以下のサンプルは指定した要素(クラスで指定)の最後の要素を赤に設定します。
適用されない 適用される

指定した要素の偶数・奇数個目の要素に適用

要素:ntn-child(番号又はodd,even)
番号は何個目か3nとか3n+1とか指定できます。
以下のサンプルは奇数行及び偶数列の要素の背景を設定します。
名前読み方書き方
鰯いわし魚へんに弱い
鮭さけ魚へんに圭
鯵あじ魚へんに参
鮪まぐろ魚へんに有り

指定した要素に隣接している要素に適用

要素:hover
以下のサンプルは指定した要素にカーソルがのった場合に背景を設定します。
hoverのほかに、visited(訪問済みのリンク)、link(未訪問のリンク、active(クリックした瞬間)がある。
名前読み方書き方
鰯いわし魚へんに弱い
鮭さけ魚へんに圭
鯵あじ魚へんに参
鮪まぐろ魚へんに有り

属性セレクタ

属性の有無

要素[属性名]
以下のサンプルは指定した要素に属性名data-tempが含まれる場合、要素を赤に設定します。
適用されない 適用される

属性名

要素[属性名="属性値"]
以下のサンプルは指定した要素の属性値targetが指定した値_blankの場合、要素を赤に設定します。
適用されない 適用される

属性名に含まれる名前

要素[属性名~="属性値"]
以下のサンプルは指定した要素の属性値が指定した値usersが含まれる場合、要素を赤に設定します。
適用される 適用される 適用されない

属性名が指定した文字列で始まる

要素[属性名^="属性値"]
以下のサンプルは指定した要素の属性値が指定した値numberで始まる場合、要素を赤に設定します。
適用される 適用される 適用されない

属性名が指定した文字列で終わる

要素[属性名$="属性値"]
以下のサンプルは指定した要素の属性値が指定した値jpgで終わる場合、要素を赤に設定します。
適用される 適用される 適用されない

属性名が指定した文字列で始まる（ハイフンまで）

要素[属性名|="属性値"]
以下のサンプルは指定した要素の属性値が指定した値test（ハイフンまで）の場合、要素を赤に設定します。
適用される 適用される 適用されない