[解決済み] CSSの最終子(-1)
2022-04-16 20:09:19
質問
リストの最後尾の子を選択できるCSSセレクタを探しています。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
<li>6</li>
</ul>
静的な方法です。
ul li:nth-child(5)
動的な方法です。
ul li:last-child(-1)
また、nth-last-child は動的な方法を提供しないようです。私はjavascriptにフォールバックすることができますが、私は私が見落としているCSSの方法があるのだろうかと思います。
解決方法は?
あなたは
可能
使用
:nth-last-child()
実は
:nth-last-of-type()
他に何が使えるかわからない。しかし、もしあなたが、リストにさらに子供が追加されたときに、スタイルが新しい2番目の最後の子供に適用されるかどうかを意味するなら、それはそうです。
インタラクティブなフィドル。
ul li:nth-last-child(2)
関連
-
[css3]css3におけるtransformプロパティの4つの機能
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSのクラス名/セレクタに使用できる文字は?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?
-
[解決済み] cssで最後から2番目の要素を選択する