.セレクター
クラスセレクター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>に適用する</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を使用しない安全で安定的な方法です。