Fork
0
Fav
3
View
7358
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 0 lines
  • HTML 38 lines
  • CSS 68 lines
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- の疑似クラスは組み合わせ次第で夢が広がりますね。
  • 子要素の数によってスタイルを変える
  • 子要素の数によってスタイルを変える

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

o_ti

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by