2016/02/08【セレクタ8選】リストの2番目、最初、最後などをcssで指定するcssのセレクタを使って、リスト(listタグ)の2番目、最初、最後などを思いのままに選択し、cssでコントロールする方法をご紹介します。cssを使ってリスト(liタグ)の特定の行だけにstyleを適用できます。(1)リストの上から2番目にcssを適用・指定したい場合li:nth-child(2)(2)リストの最後だけstyleを適用したい場合li:last-child(3)リストの最初だけstyleを適用したい場合li:first-child(5)リストの下から2番目にcssを適用・指定したい場合li:nth-last-child(2)だいたいこれだけでなんとかできます。以下、具体的な記述方法をご紹介します。li:nth-child(2)でリストの特定の行(上から2番め)を選択しています。li:last-childでリストの最後の行を選択しています。li:first-childでリストの最初の行を選択しています。li:nth-last-child(2)でリストの下から2番目の行を選択しています。今回はulリストのみでセレクタを紹介していますが、dlやolやtableなどのリストであっても同様に実装可能です。td:first-child{●●●}のように記述します。他にも使用頻度の高い便利なセレクタの記述がありますので、さらっとご紹介します。{ほにゃほにゃ}li:nth-child(2n)でも可能まだまだあります!次は「●番目から●番目まで」のセレクタや「●番目以降」などのちょっとマニアックなセレクタをご紹介します。{ほにゃほにゃ}具体的に数字を入れると、次のようになります。◎は+1されますのでご注意ください。●){ほにゃほにゃ}具体的に数字を入れると、次のようになります。5){ほにゃほにゃ}—セレクタを使う際の注意点セレクタを使用していると、その後リストが増えたり、減ったりした時にcssの適用位置がずれてしまうということがあります。li:nth-child(10)と、ガチガチに指定している場合などは修正箇所が結構増えてしまいます。HTMLコーダーの方がプログラマにcssを渡す時、このような記述は嫌がられることもあります。リストの増減が予想される箇所に多用するのは控えたほうがいいでしょう。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【制作実績】レイングッズを紹介するサイトを制作しました要素クリックでclassを付与するJqueryコード。【wordpress】ウィジェットを取得するシンプルなコード。人気記事TOP10会社の椅子をバランスボールにし、2年経って思ったこと。7色の虹色をデザインに使用する際の注意点。充電器は壊れやすい?【ネットに繋がらない】PPPoE見直しても、再起動でもダメ...その意外な原因とは!?GoogleにAdwords検索資格者として認定されましたホームページのインデックスがいきなり0に!意外な原因と解決法とは?雨の中、大久野島で1泊しました!うさぎ天国かざぐるマウスの使い方や設定方法を分かりやすくご紹介。【AfterEffects】有料プラグインおすすめの定番3選。この1冊読めばスタートに立てますCG制作で活躍「ゲーミングマウス」4選。【wacomペンタブ】BAMBOOとIntiosのペンは互換性あり!?【無料】検索順位を調べるツール「GRC」が便利すぎるCG制作で活躍「ゲーミングマウス」4選。要素クリックでclassを付与するJqueryコード。【CSS】classを2つ指定して制御する方法。【wordpress】ウィジェットを取得するシンプルなコード。【すぐ解決】パーマリンクを変えたら画面真っ白問題。CPIサーバー利用中の方向けデザイナー必読。高価買取される初期デジモンカード(旧裏面)まとめamazonアフィリエイトの審査に落ちる人必見。合格のコツ【ネットに繋がらない】PPPoE見直しても、再起動でもダメ...その意外な原因とは!?ホームページ・ブログ・動画作ります。