汎用CSSセレクタ

2023.04.06
セレクタ概要例備考
*すべての要素*{color:blue;}
E[foo]foo属性を持つE要素a[title]
E[foo=”bar”]foo属性の値にbarを持つE要素a[target=”_blank”]
E[foo^=”bar”]foo属性の値がbarで始まる要素div[id^=”block”]
E[foo$=”bar”]foo属性の値がbarで終わる要素p[class$=”txt”]
E[foo*=”bar”]foo属性の値にbarを含む要素div[id*=”About”]
E:nth-child(n)n番目の子となるE要素table.sample tr:nth-child(2n+1)nの部分には、整数、奇数を表すodd、偶数を表すeven、数式を指定することができる
E:nth-of-type(n)n番目のその種類の要素div.sample2 p:nth-of-type(4)・nの部分には、整数、奇数を表すodd、偶数を表すeven、数式を指定することができる
・指定した種類の要素のみを数えてスタイル適用の対象が決定される
E::first-letter要素の最初の文字p:first-letter {background-color:#3366cc; color:#ffffff; padding:5px;}ブロックレベル要素の最初の文字を対象にスタイルを適用する。インライン要素には適用できない
E:not(s)sで指定するセレクタに当てはまらないE要素a:not([href*=”yahoo.co.jp”])
{font-size:20px; background-color:#FF9999;}
E > FE要素の子となるF要素p > strong {background-color:#3399FF; color:#ffffff; padding:5px;}あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用することができる
E + FE要素の直後に隣接しているF要素h2 + p {color:#0000ff;}同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができる
E ~ FE要素の後ろにある同じ階層のF要素div.sample h2 ~ p {border: 3px dotted #000000;}同じ階層にある要素同士であれば、E要素とF要素の間に他の要素があっても（E要素とF要素が隣接していなくても）、F要素にスタイルが適用される
inserted by FC2 system