【重要】サービス終了のお知らせ

Works

特定のクラスが単一で指定されている要素にだけスタイルを当てる

そもそも何がしたかったのか思い出せなかったので http://jsdo.it/GeckoTang/yGBM こちらを見たほうが良さそうです。げこたんさんありがとうございました。 ---- # 特定のクラスが単一で指定されている要素にだけスタイルを当てる 今回はクラスの値が「tkg」のみのものだけ背景色を黄色にしたい。 ## test1 .tkg{} 当然複数クラスのものもマッチする ## test2 [class^="tkg"][class$="tkg"]{} 属性セレクタの前方一致と後方一致を両方書いても「tkg-of-tkg」や「tkg *** tkg」にマッチしてしまう ## test3 .tkg[class^="tkg"][class$="tkg"]{} おしい。これでほぼOKそうだけど、うっかり「tkg tkg」とかしちゃった時にもマッチする。 でもたぶんそれで問題ない。 ## test4 [class^="tkg"][class$="tkg"]:not([class*=" "]){} 複数クラスは除きたいというならば、スペース区切りが含まれていないものを選べば絞り込める。なので :not([class*=" "]) をつける。 とりあえず単一クラスは取れた。 ## test5 .tkg[class^="tkg"][class$="tkg"]:not([class*=" "]){} 全部のせ。でもこんなことしなくてもよい。 ## .tkg:not([class*=" "]){} test4 で答えは出ていた。目的のクラスかつ単一クラスであればよい。 # 前方一致とか後方一致とか考えるからややこしくなった :not() 最高!

  • 1877
  • 0

子要素の数によってスタイルを変える

stack overflow より。 from:http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has ◆仕組み li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li {...} li:first-child => 最初の子要素(この場合 li 要素) li:first-child:nth-last-child(2) => 最初の子要素 且つ 最後から2番目の子要素 この時点で子要素(li)は2つしかないと判定できる。 もし <ul> <li id="item1"> <li id="item2"> <li id="item3"> </ul> だったら、#item1 は :first-child だけど :nth-last-child(2) にはならない。 li:first-child:nth-last-child(2) ~ li => 最初の子要素かつ最後から2番目の子要素 の間接要素 これで残りの子要素も判定できる。 ちなみに、こういうふうに書いても同じ。 li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) + li {...} でも隣接セレクタで書こうとすると、子要素の数が増えた時は全部列挙しなきゃいけなくなる。 li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) + li, li:first-child:nth-last-child(5) + li + li, li:first-child:nth-last-child(5) + li + li + li, li:first-child:nth-last-child(5) + li + li + li + li {...} very dirty! なのでやっぱり間接セレクタが楽ちん。 nth- の疑似クラスは組み合わせ次第で夢が広がりますね。

  • 7512
  • 3

要素の余りを出す

◆考え方 ul li li li li li li /ul 上記のようなHTMLで、li を3つ幅でフロートして、 □□□ □□ みたいなレイアウトにする、とする。で、カラム落ちしたやつに別のスタイルを当てたい。(色を変える、2つあまったら2つ幅でフロートする、とか) 子要素を3で割るとすると、考えられるのは余りが0,1,2のパターン。余りが0は何も気にしなくていいので、余り1と余り2を考える。 3で割る、ということは3で割り切れる要素があるということ。 li:nth-child(3n) ← 3で割り切れる(3,6,9,12,15...) これに余りの数を足せば「3で割った余り」になる。 :nth-child(3n+1) ← 4,7,10,13,16... :nth-child(3n+2) ← 5,8,11,14,17... でもこれだけだと、li が20個あった時に、 ul li ← match li ← match li li ← match li ← match li li ← match li ← match li li ← match li ← match li li ← match li ← match li li ← match li ← match li li ← match li ← match /ul となってしまう。やりたいのは □□□ □□□ □□□ □□□ □□□ □□□ □□ こいうレイアウトの時の最後の2つにマッチするCSS。なので、:nth-last-child() を使う。 ● :nth-last-child() って? 文字通り最後から何番目かを数える疑似クラス。上記HTMLだと、最後から1番目と2番目が対象になればいい。 :nth-last-child(1) :nth-last-child(2) でもこれだと、割り切れる数もHTMLの構造も関係なくマッチしてしまう。なので組み合わせる。 :nth-child(3n+1):nth-last-child(1) ←3で割って余り1 且つ 最後から1番目 □□□ □□□ □ これの最後にマッチ。でも余りが2つだとマッチできない。なので (N) をずらす。 :nth-child(3n+1):nth-last-child(2) ←3で割って余り1 且つ 最後から2番目 :nth-child(3n+2):nth-last-child(1) ←3で割って余り2 且つ 最後から1番目 こうすれば、カラム落ちしてる余りの子要素を絞り込める。この要領であまりの数の分記述を増やしていけばいい。 割ったときの余りが最後から何番目なのか、を考えればよい。 ------ このように書くのは割る数と余りが増えていく面倒くさいので、 ~ の間接セレクタを使ってもうちょっとシンプルにしてみた。

  • 1974
  • 0

tdがfloatしたimage要素を持っているとvertical-alignを失う

  • 2801
  • 0

display toggle

:checked で表示を切り替えるテスト。 body直下に input 置くと label との紐付けごとに :checked のセレクタが増えてくのはしかたないのか……。

  • 1287
  • 2

CSS iOS 7 toggle button

iOS 7 のやーつをもーしゃ(模写)。 ウェブサイトで考えたら文字列を label でかこって テキストクリックでトグルが効くようにするのが普通だけど、 iOS 7 では文字列タップではトグルできなかったので、それに倣った。 ちょっとくらいグラデかかってるんでしょ?って思って画面キャプチャしてみたけど ぜんぜんグラデなくてシャドウだけだった。 今回のミソとしては、checked 時の緑色背景を background ではなく極太の border にしたこと。 iOS 7 では見た目上、ON ではボーダー無しの緑背景、OFF ではグレーボーダーに白背景となっている。 これをその通りの CSS にしてアニメーションさせようとすると、トグル時の変化を整合させるのが難しかった。 なのでコントロールしやすいボーダーでのカラーリングにしてみた。 box-sizing: border-box; でわずらわしいサイズの計算も考えずにすんでいい感じ。 transition-timing-function: cubic-bezier() を初めて使ってみたけど、 これは人の書くものではないなと思ったので、この辺で似た動きを拾ってがんばるとよいと思う。 » http://matthewlein.com/ceaser/ cubic-bezier に関しては上記リンク先のツールがあらかじめ用意してくれていた easeInOutBack というやつの数列をコピって自分で調整してみた。 やったけど、明日にはもうどこの数値が何を意味するのか覚えてる自信はない。 (※ easeInOutBack は仕様上の keyword ではなく、ただの呼び名です) また、iOS 7 を触ってて気づいたのだけど、 トグルはタップホールドした時にもスタイルに変化があった。 これはinput:active で実現している。ただ :active 状態を見るには ボタンをクリックしたまま label 描画エリアの外にドラッグしなければならない。 (この挙動は Chrome 29 だけかも。他ブラウザは未確認) そうすると ::selection が発動したりして見た目うっとうしい。 スタイルをリセットしようかと思ったけどやめた。

  • 2870
  • 0

Skills

  • HTML5
  • XHTML
  • CSS
  • CSS3

Hot tags

Categories

HTML / CSS / JavaScript