忘れられがちなCSSセレクタ集

忘れがちなCSSセレクタ達を紹介していきます。

リンクで使用するセレクタ

a:link{~}	未訪問のリンク
a:visited{~}	訪問済みのリンク
a:active{~}	クリック状態のリンク

コピペで再利用しやすいように載せます。

 //直下の子要素 1つ下の階層の子要素が対象
 div > p{~}
 
 //兄弟要素 指定した要素より後に出てくる同じ階層の要素が対象
 div ~ p{~}
 
 //隣接要素 その要素の直後にある要素が対象
 div + p{~}
 
 //偶数番目にある要素
 p:nth-of-type(even){~}
 
  //奇数番目にある要素
  p:nth-of-type(odd){~}
  
  //指定した属性を持つ要素が対象
  p[class]{~}
  a[target]{~}
  
  //指定した属性を持ち、値が一致する要素が対象
  a[target="_blank"]{~}
  a[href="https://paaaak.com/"]{~}
  
  //指定した属性を持ち、値の始まりが一致する要素が対象
  a[href^="mailto:"]{~} //href属性が「mailto:」から始まる要素
  
  //指定した属性を持ち、値の終わりが一致する要素が対象
  a[href$=".pdf"]{~} //href属性の拡張子が.pdfの要素
  
  //指定した属性の値が部分一致する要素が対象
  p[class*="text"]{~} //.c-text,.c-intro-textなどクラス名に「text」を含む要素
  
  //文章の一行目が対象
  p::first-line{~}
  
  //文章の一文字目が対象
  p::first-letter{~}
  
  //〇〇以外の要素を対象
  p:not(.c-blue-text){~} //クラス名が「c-blue-text」以外のpタグを対象
  
  //空要素を対象
  div:empty{~} //<div></div>のような要素の中身が空のdivタグを対象
  
  //チェック状態のセレクタを対象(チェックボックスやラジオボタン)
  input[type="checkbox"]:checked{~}
  input[type="radio"]:checked{~}  
  
  //ページ内アンカーリンク
  #block:target{~} //<a href="#block"></a>をクリックした時に#blockの要素に適用されるスタイル

IEでは今の所使えないセレクタ(IE以外の主要なブラウザではサポートされている)

:is() --- 複数のセレクタを1つにまとめられる

 //Before
 .c-about .c-page-title:hover,.c-about .c-page-subtitle:hover{
   opacity: 1;
 }
 
 //After
 .c-about :is(.c-page-title,.c-page-subtitle):hover{
   opacity: 1;
 }

このように同じスタイルをあてる箇所でも分けて書く必要があった所が、:is()セレクタを使用することによって1つにまとめることができるので、コードが短くなり、可動性も向上する。
ただ、使えそうな場面は限られているので、必要に応じて使うと良い。

:where() --- 複数のセレクタを1つにまとめられる。:where()で指定した部分の詳細度を0にする
基本は:is()セレクタと全く同じ使い方だが、:where()で指定した部分の詳細度を0にするという点が違う。

 <div class="c-about">
   <h2 class="c-page-title">ページタイトル</h2>
 </div>

 .c-about :where(.c-page-title,h2){
   color: blue;
 }
 
 .c-about h2{
   color: yellow;
 }

上記の場合、color: yellow;が勝ちます。
上の詳細度は(0,0,1,0)となり、下の詳細度(0,0,1,1)に負けます。
.c-page-titleの詳細度は本来(0,0,1,0)ですが、:where()の中で指定しているので、詳細度は0になっています。