WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。2014の4日目の記事です。iOSで動作のうまく行かない:checked擬似クラスについて調べててわかったことです(中途半端です)。先日、擬似クラスを使ったCSSの指定を実験していたのですが、PCブラウザーでは動くのにスマートフォンでは動かない!みたいな状況に直面したのでそれについてちょっと書きます。:checked擬似クラスの2つ以上隣の隣接セレクター:checked擬似クラス、便利なヤツです:checked擬似クラスはCSS3で追加されたセレクターで、ラジオボタンやチェックボックスがチェックされた状態を指定する擬似クラスです。CodePen.このデモはinput要素に隣接したラベルに、さらに隣接した非表示になっている要素をチェックの入ったときにのみ表示させるというものです。これがFirefoxやChrome(ちなみにMac)では動くんですが、iPhoneのSafariとChromeでうまく動きませんでした。Android(4.4)はいけました。原因これはどうやらWebkitのバグであるらしいです。FirefoxはGecko、ChromeはBlinkですが、iOSのSafariはWebkitですね。iOSはChromeもWebkitなので全滅です。その後PCのSafari(Webkit)でも検証しましたがやはり動かないですね。いう用途をしたい状況がどの程度起きることなのかわからないですが、これについて質問していたらげこたん(@geckotang)が前例となる資料を見つけてきました。原因についてはバグなんだーと諦めたので、次にやりたいことを代替する対応法を2つ。間接セレクターを使う間接セレクターを使えば同じことが問題なくできました。CodePen.ただ、前述のリンク先で示しているように間接セレクターでやると同じ親要素内に同じ仕組みのセットがあると全てのチェックが起動してしまったような状態になるので、一つ一つラップしてそれ以降のdisplay:blockを起動しないようにしないといけません。:nth-child擬似クラスなどを併用するこんなもの正直思いつきもしないのですが、これも先ほどのリンク先で紹介されている方法です。Overflow単なる要素ではなく、擬似クラスを追加することで動作するようになります。他のページでは別の擬似クラスを実験しています。この方法で動くようになるのはWebkit系だけっぽいです。ダメじゃん、っていうか新たな謎が出てきます(もう追求するのはやめました)。いうわけでこれに対処するのは前述の、いちいちラップして間接セレクターという方法がオススメです。蛇足:隣接セレクターおまけです。隣接セレクターはいくつくらいまで連結できるのか試してみたんですけど、要素の数が3万越えるとタブが死んだので、私の環境でやる限りでは表示される限りいくつでもイケるという感じでした。実は100個くらい並べてプチプチゲームみたいなの作ろうと思ってたのでホッとしました。Calendarはdskdの越智さん(@o_ti)です。押してしまいましたがよろしくですー!★tweethatenafacebook_likewebcre8はTwitterを使っています。