Q&A
お世話になっております。
下記コードにつきまして、
li:nth-child(2)、li:nth-child(3)、li:nth-child(4)
のように連番で記述しているのですが
nth-childクラスを使用して
他の記述方法があればと思い質問させていただきました。
お手数おかけ致しますが、宜しくお願い致します。
html
1<ul> 2 <li>1</li> 3 <li>2</li> 4 <li>3</li> 5 <li>4</li> 6 <li>5</li> 7</ul>
css
1ul{ 2 list-style:none; 3 text-align: center; 4} 5 6li:first-child{ 7 background-color:red; 8} 9 10li:nth-child(2), 11li:nth-child(3), 12li:nth-child(4){ 13 background-color:green; 14} 15 16li:last-child{ 17 background-color:blue; 18} 19
回答1件
0
ベストアンサー
その例であれば、自分はこう書くと思います。
html
1<!DOCTYPE HTML> 2<html lang="ja-JP"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 ul{ 8 list-style:none; 9 text-align: center; 10 } 11 12 li { 13 background-color:green; 14 } 15 16 li:first-child{ 17 background-color:red; 18 } 19 20 li:last-child{ 21 background-color:blue; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>1</li> 28 <li>2</li> 29 <li>3</li> 30 <li>4</li> 31 <li>5</li> 32 </ul> 33 </body> 34</html>
投稿2015/08/26 14:27
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/26 14:36