~（チルダ）を使ったcssのセレクタ指定方法！:checked疑似クラスと使うと幅が広がるよ
このサイトではよく使っている:checked疑似クラスと~（チルダ）を組み合わせたセレクタを使うとjsのクリックイベントのような使用感でcssを切り替えることが可能になります。
ただ難しいみたいなんで基本的なルールから、checked疑似クラスと組み合わせたときの使い方まで、サンプルを大量投下しつつ紹介していきます
基本的なルール
~を使ったセレクタの指定は基準になる要素と基準のあとにある兄弟要素を~つなぐように指定していきます
例えば以下のようなHTMLがあったとしましょう。
|
1 2 3 4 5 6 |
<section> <h2>〇〇について</h2> <p>〇〇にはこのような特徴があります</p> <h3>〇〇は組み合わせ自由</h3> <p>〇〇は色々なものと組み合わせて利用することができます</p> </section> |
これを~を使ったセレクタでスタイル指定してみます。
|
1 2 3 |
h3 ~ p{ background-color:pink; } |
例えば上に書いたようなスタイルは「h3」のあとにある兄弟要素の「p要素」が装飾の対象になります
よって「h3要素」の前に記述されている「p要素」には何も起こらず、あとに記述されている「p要素」だけに絞り込んでスタイル指定が可能です
親子関係をコメントで追加してみました。
|
1 2 3 4 5 6 |
<section><!--親--> <h2>〇〇について</h2><!--子要素（長男）--> <p>〇〇にはこのような特徴があります</p><!--子要素（次男）--> <h3>〇〇は組み合わせ自由</h3><!--子要素（三男）--> <p>〇〇は色々なものと組み合わせて利用することができます</p><!--子要素（四男）--> </section> |
今回の指定した「h3 ~ p」は三男のh3よりも弟分のp要素だけを対象にしていますので、該当する要素は四男のp要素です。
指定した兄弟要素の子要素まで指定できる
指定した弟分の要素から子要素を絞り込むことだって可能です。
セレクタが冗長になりがちというデメリットはありますが、更にやれることの幅が広がります
先程のサンプルのコードにあったp要素の部分にspan要素を追加してみました
|
1 2 3 4 5 6 |
<section> <h2>〇〇について</h2> <p><span>〇〇</span>にはこのような特徴があります</p> <h3>〇〇は組み合わせ自由</h3> <p><span>〇〇</span>は色々なものと組み合わせて利用することができます</p> </section> |
先ほどと同じようにcssを指定しますが、今回は子要素まで絞り込んでみます。
|
1 2 3 |
h3 ~ p span{ background-color:pink; } |
セレクタの「~ p」以降は普通に子孫を指定できるのでspan要素のみ装飾することが可能になります
ここまで紹介しましたが、これ単体ではあまり使いみちがないかも知れないですね
checked疑似クラスと組み合わせる
ここからが本題で、単体では使いにくい~を使ったセレクタは『checked疑似クラス』と組み合わせることで、jsのクリックイベントのように扱うことができるようになります。
ベースとなるHTMLは以下のとおりです
|
1 2 3 4 5 6 7 8 |
<div class="container"> <p>:checkedと～の組み合わせのテスト</p> <input type="checkbox" id="check"> <p>:checkedと～の組み合わせのテスト</p> <p>:checkedと～の組み合わせのテスト</p> <p>:checkedと～の組み合わせのテスト</p> </div> <label for="check"><p class="btn">切り替え</p></label> |
div要素の中にp要素とinput要素を入れています。
div要素の外にはlabel要素を使って離れた位置からでもチェックボックスの状態を変更できるようにボタンを作っています
更にcssを追加していきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#check{ width: 20px; height: 20px; } #check:checked ~ p{ background-color: #ff9e9e; } .btn{ display: inline-block; padding: 10px 20px; border-radius: 4px; cursor: pointer; background-color: #d1d1d1; } |
『#check:checked』でid属性checkが付与されたチェックボックスorラジオボタンのチェックが入った状態を指定するセレクタになります
あとに「~ p」と続けているので、チェックが入った状態のid属性checkが付与されたチェックボックスのあとに書かれている（弟分）のp要素を対象とするセレクタになります
:checkedと～の組み合わせのテスト
:checkedと～の組み合わせのテスト
:checkedと～の組み合わせのテスト
:checkedと～の組み合わせのテスト
今回のようなケースではinput要素に関しては消して使うことが多いと思うので、兄弟で言う長男の位置に配置して使うと使いやすいと思います
更に子孫まで指定すれば幅広く応用ができると思いますのでお試しあれ
