CSSの各種セレクタ CSS コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

.セレクター

クラスセレクターCSS
要素名.クラス名{~}
目的 指定したクラス名の要素に対しスタイルシートを適用する 
クラスセレクターをこの要素に適用する
クラスセレクターを<span class="span-this-1">この要素</span>に適用する
.span-this-1{
  background-color:#ff99cc;
}

#セレクター

IDセレクターCSS
要素名#ID{~}
目的 指定したID名の要素に対しスタイルシートを適用する
IDセレクターをこの要素に適用する
IDセレクターを<span class="span-this-2">この要素</span>に適用する
#span-this-2{ 
  background-color:#ff99cc;
}

子孫セレクター

子孫セレクターCSS
要素名A 要素名B{~}
目的 指定した要素の子孫について適用する。子に限らず、孫にも適用される

子孫セレクターをこの要素に適用する

<p>クラスセレクターを<span class="span-this-3">この要素</span>に適用する&lt;/p>
p .span-this-3{
  background-color:#cc99ff;
}

子セレクター

子セレクターCSS
要素名A > 要素名B{~}
目的 指定した要素の子について適用する。子に限り、孫には適用されない
子セレクターをこの要素にのみに適用する。これはspan-style-1から見ると孫であるから適用されない
<span class="span-style-4">子セレクターを<em>この要素</em>にのみに適用する。<strong><em>これは孫であるから適用されない</em></strong></span>
.span-style-4 > em{
  background-color:#cc99ff;
}

間接セレクター

間接セレクター (次弟セレクター)CSS
要素名A + 要素名B{~}
目的 指定した要素の次の弟にのみ適用される
弟セレクターはこの要素1番目2番目とすると1番目にのみ、適用される
弟セレクターは<span class="span-this-5">この要素</span>の<em>1番目</em>、<em>2番目</em>とすると1番目にのみ適用される
.span-this-5{
  background-color:#ff99cc;
}
.span-this-5 + em{
  background-color:#cc99ff; 
}

間接セレクター

間接セレクター (全弟セレクター)CSS
要素名A ~ 要素名B{~}
目的 指定した要素内の末尾にコンテンツを挿入する。クラス名を指定することで特定の弟を指定できる。~は日本語キーボードでは右上の¥の左隣の文字です。
すべての弟に適用

弟セレクターはこの要素1番目2番目とすると1番目と2番目共に適用される
弟セレクターは<span class="span-this-6">この要素</span>の<em>1番目</em>、<em>2番目</em>とすると1番目と2番目共に適用される
.span-this-6{
  background-color:#ff99cc;
}
.span-this-6 ~ em{ /* 全ての弟が対象となる */
background-color:#cc99ff; 
}
特定の弟に適用

弟セレクターはこの要素1番目2番目とすると2番目にのみ適用される
弟セレクターは<span class="span-this-7">この要素</span>の<em>1番目</em>、<em class="em2">2番目</em>とすると2番目にのみ適用される
.span-this-7{
  background-color:#ff99cc;
}
.span-this-7 ~ em.em2{ /* この方法で弟を限定できる */
  background-color:#cc99ff; 
}

具体的な利用

間接セレクターはinput、labelと組み合わせて表示の切り替えを実装することができます。

~を使った表示の切り替え

クリックでボックスの表示非表示アコーディオンをCSSのみで実装 コピペで使えるHTML+CSS
詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。Javascriptは使用しません。
続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS AMP対応
[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。