CSSの小技 その7 今回は「nth-child()で要素の指定」です。 今までのデモページで使用していましたが、nth-child()について もう少し掘り下げていきたいと思います。 用途 テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、 今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。 実装方法 今回は前回使ったナビゲーションで説明します。 ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。 ひとつ目の要素はfirst-childで指定することも出来ます。 CSSは下の方に記述しています。 HTML <nav> <ul> <li><a href="#">HOME<span>ホーム</span></a></li> <li><a href="#
![【CSS】nth-child()で要素の指定 - 株式会社ネディア │ネットワークの明日を創る│群馬](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e365a98e7300528f46648378ac13158a4b11f23/height=288;version=1;width=512/https%3A%2F%2Fwww.nedia.ne.jp%2Fwp-content%2Fuploads%2F2015%2F04%2Fcss07-00.png)