cssセレクターの一覧

全称セレクター

全ての要素を対象

要素型セレクター
通常の「p」や「div」や「h1」のような要素などがそれにあたります

下のサンプルでは全ての「a」要素を対象

a{
 ～
}

<p></p>
<a></a>
<div>
 <p></p>
 <a></a>
</div>

クラスセレクター

class名の頭に「.(ピリオド）」を付けたものを対象

.a1{
 ～
}

<p></p>
<a></a>
<div>
 <p class="a1"></p>
 <a></a>
</div>

IDセレクター

id名の頭に「#(ナンバーサイン）」を付けたものを対象

#a1{
 ～
}

<p></p>
<a></a>
<div>
 <p id="a1"></p>
 <a></a>
</div>

属性セレクター

「 [ ] （角括弧で囲む）」で属性を囲みます

[type="text"]{
 ～
}

/*hrefに書かてれいるリンクが「test1」と一致*/
[href="test1"]{
 ～
}

/*data-sampleと一致*/
[data-sample]{
 ～
}

/*data-example="2"と一致*/
[data-example="2"]{
 ～
}

<div>
 <input type="text">
 <div>
  <a href="test1">リンク</a>
  <a href="test9">リンク</a>
  <p data-sample="test">テキスト</p>
 </div>
 <p data-example="1">テキスト</p>
 <p data-example="2">テキスト</p>
</div>

「att」に値があるかは関係なく、属性を持っていれば適用

下記の場合、要素のidやtitleに値がセットされていなくてもスタイルが適用されます

div>[id]{
 color:yellow;
}

div>[title]{
 color:yellow;
}

<div>
 <p id="">テキスト1</p>
 <p>テキスト2</p>
 <p title="">テキスト3</p>
</div>

Sample

「att」にセットされた「val」に該当すれば適用

下記の場合、要素の「title」に「test1」がセットされている要素にスタイルが適用されます

div>[title="test1"]{
 color:yellow;
}

<div>
 <p title="test1">テキスト1</p>
 <p title="test1">テキスト2</p>
 <p title="test2">テキスト3</p>
</div>

Sample

「att」にセットされた「val」に属性の値（空白で区切られたリスト形式）の値が該当すれば適用

下記の場合、要素の「title」に「test1」「test2」「test3」がバラバラにセットされており、「title」に「test1」が存在する場合にのみ適用されます

div>[title~="test1"]{
 color:yellow;
}

<div>
 <p title="test1 test3">テキスト1</p>
 <p title="test2 test1">テキスト2</p>
 <p title="test2 test3">テキスト3</p>
</div>

Sample

「att」にセットされた値が「val」と前方一致すれば適用

下記の場合「id」の値の前方から「te」が一致する場合にのみ適用されます

div>[id^="te"]{
 color:yellow;
}

<div>
 <p id="test">テキスト1</p>
 <p id="text">テキスト2</p>
 <p id="omake">テキスト3</p>
</div>

Sample

「att」にセットされた値が「val」と後方一致すれば適用

下記の場合「id」の値の後方から「go」が一致する場合にのみ適用されます

div>[id$="go"]{
 color:yellow;
}

<div>
 <p id="tamago">テキスト1</p>
 <p id="tamagoyaki">テキスト2</p>
 <p id="tango">テキスト3</p>
</div>

Sample

「att」にセットされた値の中に「val」と一致する値があれば適用

下記の場合「id」の値の中に「st」が一致する場合にのみ適用されます

div>[id*="st"]{
 color:yellow;
}

<div>
 <p id="test1">テキスト1</p>
 <p id="text1">テキスト2</p>
 <p id="stop1">テキスト3</p>
</div>

Sample

子孫結合子

該当する子孫要素の全てを対象

.a1 span{
 ～
}

<div class="a1">
 <span></span>
 <span></span>
</div>

<div class="a1">
 <div>
  <span></span>
  <span></span>
 </div>
</div>

子結合子

直接の子に該当する要素を対象

.a1>span{
 ～
}

<div class="a1">
 <span></span>
 <span></span>
</div>

<div class="a1">
 <div>
  <span></span>
  <span></span>
 </div>
</div>

後続兄弟結合子

直接の子に該当する要素を対象
「~」の前後に半角スペース推奨

.a1 ~ span{
 ～
}

<div>
 <h2 class="a1"></h2>
 <p></p>
 <span></span>
 <h2 class="a1"></h2>
 <span></span>
 <p></p>
 <span></span>
</div>

次兄弟結合子

直接の子に該当する要素を対象
「+」の前後に半角スペース推奨

.a1 + span{
 ～
}

<div>
 <h2 class="a1"></h2>
 <p></p>
 <span></span>
 <h2 class="a1"></h2>
 <span></span>
 <p></p>
 <span></span>
</div>

DOMツリーのルート（html要素）を指します
使いどころとしては、グローバルカスタムプロパティ（CSS変数）の指定に利用します

CSS変数を利用することで、同じスタイルを1か所で管理することができます
CSS変数を指定するには、 (--) 名称の前にハイフン2つ付けてCSS変数名を設定します

cssでは「var(CSS変数名)」で共通した値を使うことができます

:root{
 --color-red:red;
}

/* CSS変数を設定しておくことで以下のように使うことができます*/
p{
 color:var(--color-red);
}
a{
 color:var(--color-red);
}

マウスオーバーしたとき

span:hover{
 color:red;
}

<span>リンク1</span>
<span>リンク2</span>

Sample

クリックなどして要素がアクティブなとき

span:active{
 color:yellow;
}

<span>リンク1</span>
<span>リンク2</span>

Sample

要素がフォーカスされているとき

#a2:focus{
 background-color:yellow;
}

<input type="text" id="a2" placeholder="focusで色が変わります">リンク1</span>

Sample

hasに続く「()」の中に該当する要素（クラス名なども含む）を指定
子孫要素に特定のクラスがあるときだけスタイルを適用したいときなどに使えると思います

ul>li:has(.a1){
 padding-left:16px;
}

<ul>
 <li>
  <p><span>テキスト1</span></p>
 </li>
 <li>
  <p><span class="a1">テキスト2</span></p>
 </li>
 <li>
  <p><span>テキスト3</span></p>
 </li>
</ul>

Sample

上の例では、li要素の中に「.a1」classがあるときだけ、li要素にpadding-leftを設定しています

notに続く「()」の中に該当する要素（クラス名なども含む）と一致しない要素を指定
子孫要素に特定のクラスがあるときだけスタイルを適用したくないときなどに使えると思います

/* :not()と:has()を組み合わせています*/
ul>li:not(:has(.a1)){
 padding-left:16px;
}

/* li要素の子孫に「.a1」クラスを持つ要素を除外して指定*/
<ul>
 <li>
  <p><span>テキスト1</span></p>
 </li>
 <li>
  <p><span class="a1">テキスト2</span></p>
 </li>
 <li>
  <p><span>テキスト3</span></p>
 </li>
</ul>

Sample

上の例では、li要素の子孫に「.a1」classがあるときli要素だけスタイルが適用されません

URL内の「#」アンカーリンク（フラグメント識別子）へとリンクしたときに、同じid名を持つ要素にスタイルを適用

#al1:target{
 color:yellow;
}

#al2:target{
 color:blue;
}

<div>
 <a href="#al1">A1 → P1</a>
 <a href="#al2">A2 → SPAN2</a>
 <p id="al1">P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span id="al2">SPAN2</span>
</div>

Sample

上の例では、A1リンクをクリックするとP1要素が、A2リンクをクリックするとSPAN2要素が変化します

nth-childに続く「()」の中に兄弟要素の位置を指定

• :nth-child( 整数値 )

  整数値で指定された番号の要素を指定

  //:nth-child(1)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

• :nth-child( odd )

  兄弟要素で奇数番目の要素を指定

  //:nth-child(odd)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

• :nth-child( even )

  兄弟要素で偶数番目の要素を指定

  //:nth-child(even)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

• :nth-child( An )

  「A」は刻み値、「n」は0～兄弟要の数だけ1刻みで増加
  
  :nth-child(2n)の場合は、
  2×0 → 2×1 → 2×2 → 2×3…
  0番目は無いので番号指定としては、
  2 → 4 → 6…となります

  //:nth-child(3n)の場合
  3×0＝0 → 3×1＝3 → 3×2＝6 → 3×3＝9…

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

• :nth-child( n+B )

  「n」は0～兄弟要の数だけ1刻みで増加、「B」は加算値
  
  :nth-child(n+2)の場合は、
  0＋2 → 1＋2 → 2＋2 → 3＋2…
  番号指定としては、
  2 → 3 → 4 → 5…となります
  使いどころとしては「B」番目以降を指定するような場合でしょうか

  //:nth-child(n+5)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

• :nth-child( -n+B )

  「n」は0～兄弟要の数だけ1刻みで増加、「B」は加算値
  上の(n+B)のマイナスバージョン
  
  :nth-child(n+5)の場合は、
  -0＋5 → -1＋5 → -2＋5 → -3＋5…
  番号指定としては、
  5 → 4 → 3 → 2…となります
  使いどころとしては「B」番目以前を指定するような場合でしょうか

  //:nth-child(-n+10)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  「:nth-child( n+B )」と「:nth-child( -n+B )」を組み合わせることで、範囲指定が出来ます

  //:nth-child(n+5):nth-child(-n+13)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

• :nth-child( An+B )

  「A」は刻み値、「n」は0～兄弟要の数だけ1刻みで増加、「B」は加算値
  
  :nth-child(2n+3)の場合は、
  (2×0)+3 → (2×1)+3 → (2×2)+3 → (2×3)+3…
  番号指定としては、
  3 → 5 → 7 → 9…となります

  //:nth-child(2n+3)の場合

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

兄弟要素（全要素）の中で、最後からn番目の要素を指定

div>:nth-last-child(2){
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素（全要素）の中で、最後から一番最初の要素を指定

div>:first-child{
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素（全要素）の中で、最後から一番最後の要素を指定

div>:last-child{
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素（指定要素）の中で、上からn番目の要素を指定

「＊:nth-of-type(n)」　＊に要素を指定する必要あり

div>p:nth-of-type(3){
 color:blue;
}

div>span:nth-of-type(2){
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素（指定要素）の中で、下からn番目の要素を指定

「＊:nth-last-of-type(n)」　＊に要素を指定する必要あり

div>p:nth-last-of-type(2){
 color:blue;
}

div>span:nth-last-of-type(2){
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素（指定要素）の中で、下から一番最初の要素を指定

「＊:first-of-type」　＊に要素を指定する必要あり

下記の場合は一番最初のspan要素が該当
※p要素はカウントに入らない

div>span:first-of-type{
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素（指定要素）の中で、下から一番最後の要素を指定

「＊:last-of-type」　＊に要素を指定する必要あり


下記の場合は一番最後のp要素が該当
※span要素はカウントに入らない

div>p:last-of-type{
 color:yellow;
}

<div>
 <p>P1</p>
 <p>P2</p>
 <p>P3</p>
 <span>SPAN1</span>
 <span>SPAN2</span>
</div>

Sample

兄弟要素がいない要素を指定

下記の場合は1つ目と2つ目と3つ目のdiv内の要素の数が違います
div内に要素が1つだけある場合にスタイルが適用されます

div>div>:only-child{
 color:yellow;
}

<div>
 <div>
  <p>P1-1</p>
 </div>
 <div>
  <p>P2-1</p>
  <p>P2-2</p>
  <p>P2-3</p>
 </div>
 <div>
  <span>SPAN1-1</span>
 </div>
</div>

Sample

「＊:only-child」＊に要素を指定するとその要素のときだけ適用
※要素を指定しないと、上の例のように全要素が対象になります

div>div>span:only-child{
 color:yellow;
}

<div>
 <div>
  <p>P1-1</p>
 </div>
 <div>
  <p>P2-1</p>
  <p>P2-2</p>
  <p>P2-3</p>
 </div>
 <div>
  <span>SPAN3-1</span>
 </div>
</div>

Sample

指定した兄弟要素がいない要素を指定

「＊:only-of-type」　＊に要素を指定する必要あり

下記の場合は1つ目と2つ目と3つ目のdiv内の要素の数が違います
指定した要素の数が1つだけの場合に、指定要素のスタイルが適用されます
3つ目のdiv内にはspan要素が2つある為適用されません

div>div>span:only-of-type{
 color:yellow;
}

<div>
 <div>
  <p>P1-1</p>
 </div>
 <div>
  <p>P2-1</p>
  <p>P2-2</p>
  <p>P2-3</p>
  <span>SPAN2-1</span>
 </div>
 <div>
  <span>SPAN3-1</span>
  <span>SPAN3-2</span>
 </div>
</div>

Sample

isに続く「()」の中に複数の要素（クラス名なども含む）を指定
指定した要素全てにスタイルが適用されます

ul>li :is(.a1, .a3){
 color:yellow;
}

/*このような書き方と同じ*/
ul>li .a1,
ul>li .a3{
 color:yellow;
}

<ul>
 <li>
  <p>テキスト1-1</p>
  <p class="a1">テキスト1-2</p>
 </li>
 <li>
  <p>テキスト2-1</p>
  <p class="a2">テキスト2-2</p>
 </li>
 <li>
  <p>テキスト3-1</p>
  <p class="a3">テキスト3-2</p>
 </li>
</ul>

Sample

whereに続く「()」の中に複数の要素（クラス名なども含む）を指定
指定した要素全てにスタイルが適用されます

isと似ていますが、優先度（詳細度）が0になってしまう点が異なります
「!important」を使うと、その後の優先度の調整が大変になるため、優先度を調整するときに「:where」を使うと良いです

ul>li .a1{
 color:red;
}

/*上のように指定していた場合、下の「.a1」の優先度は0となるので、上のスタイルが設定されます*/

ul>li :where(.a1, .a3){
 color:yellow;
}

<ul>
 <li>
  <p>テキスト1-1</p>
  <p class="a1">テキスト1-2</p>
 </li>
 <li>
  <p>テキスト2-1</p>
  <p class="a2">テキスト2-2</p>
 </li>
 <li>
  <p>テキスト3-1</p>
  <p class="a3">テキスト3-2</p>
 </li>
</ul>

Sample

要素内の最初の子要素として適用

div>p::before{
 content: "ここにセット▶";
 color:yellow;
}

<div>
 <p>[＊]テキスト</p>
</div>

Sample

要素内の最後の子要素として適用

div>p::after{
 content: "◀ここにセット";
 color:yellow;
}

<div>
 <p>テキスト[＊]</p>
</div>

Sample

要素内の最初の行にだけ適用

下記の例では1行目と2行目を「<br>」で改行しています

div>p::first-line{
 color:yellow;
}

<div>
 <p>（1行目）テキストテキスト<br>（2行目）テキストテキスト</p>
</div>

Sample

要素内の最初の文字にだけ適用

「::before」で1文字目より前にテキストが挿入されると、1文字目として適用される
※最初の文字より前に画像などがる場合は適用外

div>p::first-letter{
 color:yellow;
 font-size: 1.2rem;
 padding-right: 3px;
}

//2文字目にだけ::beforeで▶を入れた場合
p:nth-of-type(2)::before{
 content:"▶";
}

<div>
 <p>テキストテキストテキストテキスト</p>
 <p>[＊]キストテキストテキストテキスト</p>
</div>

Sample

floatやline-heightを組み合わせることで、下のような効果をつけることも

div>p::first-letter{
 color:yellow;
 font-size: 3rem;
 height: 1em;
 line-height: 1em;
 float: left;
 padding-right: 3px;
}

//2文字目にだけ::beforeで▶を入れた場合
p:nth-of-type(2)::before{
 content:"▶";
}

<div>
 <p>テテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

Sample2

リスト項目の箇条書き記号を適用

「display:list-item」や「li」要素などで使用します

div>ul>li::marker{
 content:"♪";
 color: yellow;
 font-size: 1.5em;
}

<div>
 <ul>
  <li>[＊]テキスト1ト</li>
  <li>[＊]テキスト2ト</li>
 </ul>
</div>

Sample

IDセレクターが該当します

（ 1, 0, 0 ）ID列に点数が加算されます

/*IDセレクター*/
#a1{
 ～
}

CLASSセレクター、属性クラスセレクターー、疑似クラスセレクターが該当します

（ 0, 1, 0 ）CLASS列に点数が加算されます

/*CLASSセレクター*/
.a1{
 ～
}

/*属性クラスセレクター*/
[type="text"]{
 ～
}

/*疑似クラスセレクター*/
:hover{
 ～
}

IDは属性として指定すると、CLASS列として扱うことができます

[id="a1"]{
 ～
}

なお、「:is()」「:not()」「:has()」は疑似クラスではなく「()」の中に書かれているセレクターの詳細度が適用されます

要素型セレクターが該当
通常の「p」や「div」や「h1」のような要素などがそれになります。

（ 0, 0, 1 ）TYPE列に点数が加算されます

p{
 ～
}

h1{
 ～
}