最近使ったCSSやjQueryの技をまとめます。その１

お品書き

hove時のCSSを無効にする・・・pointer-events: none;
要素の順番をCSSで入れ替える・・・flexbox
クラスの何番目の要素で指定・・・疑似クラス:nth-child()

hove時のCSSを無効にする

以前、checkboxの値に応じてボタンの有効無効を切り替える記事を書いたのですが、

jQuery　checkboxに応じて切り替え　

もともとボタンをhoverしたときにボタンの色が濃くなるなどのCSSはそのまま適用されてしまうので、利用する側からは押している感覚（といって正しいのか）があるのに、ページが進まないのは変だよね。

ということで、hover時のCSSを無効にする方法を調べた。
ボタンにdisabled属性をつけたり外したりしてボタンの有効無効を変えていたので、
CSSも同じ要領でやる？と考えたんですが、もっとお気軽な方法が！

css

button[disabled] {
    pointer-events: none;
}

なんて簡単！
pointer-eventsは初期値ではautoで、
noneにすることでその要素がポインターイベントの対象にならなくなる。

要素の順番をCSSで入れ替える

HTMLは変更せずにCSSだけで要素の順番を変えたい！

`flexbox`を使う

html


<div class="main">
  <ul>
　　<li class="text">22222</li>
　　<li class="text">33333</li>
　　<li class="text">11111</li>
　　<div>
  </ul>
</div>

上記のコードでは数字が2→3→1になってしまうので、正しい順番に表示したい。
ただ、HTMLの順番を変えるのではなく、CSSで順番を変える。（たとえば、PCとスマホバージョンで表示の順番を変えるときとかに使う）
このときに使うのがfrexbox

Flexboxの使い方

親要素にcssでdisplay:flexbox;を追加。
これを追加することで、親要素をFlexコンテナーに設定。
Flexコンテナーに含まれる子要素をFlexアイテムとして設定される。
さらに、flex-directionで並び方をいじれる。初期値はrow。縦（公式的には積み重なるように）にしたかったので今回はcolumnで指定。

css

main {  
    display:flex;
        flex-direction:column;
}

さらに、子要素にorder:順番を示す数字;を設定することで表示させる順序を入れ替える事ができる。
・・・今回はここで問題発生
子要素のクラスが3つともtextなので、指定するにはどうすれば？
擬似クラスという便利なものがあるそうで。それを使ってみる。

css

.text:nth-child(1){
    order:2
}
.text:nth-child(2){
    order:3
}
.text:nth-child(3){
    order:1
}

これで、textクラスの表示の順番を変えることができた。
ちなみに、孫要素には効かないらしいので注意。

擬似クラス

さっき使った擬似クラスについて。

対象となる要素：nth-child(n)

これで、対象となる要素の中でn番目の要素を指定することができる。クラスを増やすまでではないときに使うと良さそう。
ちなみに、()の中身は2nとかで偶数番目だけとかで色々条件指定ができるそう。
細かく見たいときはこちらを。（下の方に参考にしたサイト全部のせてます）

参考にしたサイト

pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
 【Flexbox】HTMLの記述を変えずに表示順を変えるCSS
要素の順番を入れ替えられるflexboxのorderを活用しよう
 CSS公式-flex-direction-
E:nth-child(n) 疑似クラス《前からn番目、一定間隔おきに指定》-CSS-

hover時のCSS無効、CSSでHTMLの要素の順番を変える、疑似クラス