タイトルにある通り、一番目以外の要素にのみ指定したスタイルを適用したいという事があったので備忘録としてまとめ。
最初、もしくは最後の要素だけというのは実装した事があるのですが、一番目以外という指定はやったことがなかったので、最初はどうすれば…？となりました。
参考にさせていただいた記事はこちら。
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス
https://webmist.info/not-first-child/
実装には、疑似クラスの :first-child と :not を使用します。
サンプルの HTML はこちら。
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ol>
上記のような HTML があったとして、最初の <li> 以外の要素にスタイルを指定したい場合は、下記のように CSS を記述します。
li:not(:first-child){
/* 指定したいスタイルを記述 */
}
やったことがなかったので知らなかったのですが、疑似クラスって同時に複数指定できるのですね！
実際に見てみればなるほどなと思う書き方でした。
こちらを応用すれば、最後の要素以外という指定の方法もできますね。
以上、CSS で一番目以外の要素にスタイルを適用する方法についてでした。
ご参考になれば幸いです。
