cssのセレクタについて

指定の基本

全て指定

* {}

id

#id名 {}

class

.クラス名 {}

子孫要素

セレクタ1 セレクタ2 {}
半角スペースで区切る。
セレクタ1の中にあるセレクタ2にのみ反映。

css内での複数セレクタの指定

セレクタ , セレクタ {}
コンマで区切る。

html内での複数のクラス指定

class="クラス名1 クラス名2"
半角スペースで区切る。

〇〇以外

セレクタ1:not(セレクタ2) {}
セレクタ1の中のセレクタ2以外に反映。

複数の〇〇以外

セレクタ1:not(セレクタ2):not(セレクタ3) {}
セレクタ1の中のセレクタ2と3以外に反映。

複数要素の最初(最後)だけを指定

最初(最後)の要素だけ

セレクタ名:first-child {}
複数ある要素の最初(最後の場合は:last-child)の要素のみcssが反映される。

最初(最後)以外

セレクタ名:not(:first-child) {}
複数ある要素の最初(最後の場合は:last-child)以外の要素にcssが反映される。

最初の文字だけ

セレクタ名:first-letter {}
最初の文字のみcssが反映される。

最初の行にだけ

セレクタ名:first-line {}
最初の行のみcssが反映される。

複数要素の〇番目だけを指定

最初からn番目

セレクタ名:nth-of-type(n) {}
複数要素の最初からn番目にのみ反映

最後からn番目

セレクタ名 :nth-last-of-type(n) {}
複数要素の最後から(最後から数えて)n番目にのみ反映

奇数(偶数)

セレクタ名:nth-of-type(odd) {}
複数要素の奇数の要素にのみ反映。(2n+1)でも可。
偶数の場合は(even)又は(2n)を入れる。

属性セレクタ

属性は、id、class、title、href など
値は属性で指定した、id名、class名、タイトル、url など

単一属性のみ

セレクタ[属性] {}
セレクタで指定した要素の中で、[]内の属性を持つ要素のみ反映。

複数属性

セレクタ[属性][属性] {}
セレクタで指定した要素の中で、[]内の2つの属性を両方持つ要素のみ反映。

属性と値が一致

セレクタ[属性="値"] {}
セレクタで指定した要素の中で、属性が[]内の値と一致する要素にのみ反映。

属性が指定した値を含む

セレクタ[属性*="値"] {}
セレクタで指定した要素の中で、属性が[]内の値を含む要素にのみ反映。

属性が指定した値で始まる

セレクタ[属性^="値"] {}
セレクタで指定した要素の中で、属性が[]内の値で始まる要素にのみ反映。

属性が指定した値で終わる

セレクタ[属性$="値"] {}
セレクタで指定した要素の中で、属性が[]内の値で終わる要素にのみ反映。