[:a]最初と最後だけスタイルを変えるCSS【覚えておくと便利なCSS3コード】

 

リストを作る時に、「最初の行だけ両端に線を入れたい~!」「最後の行の後に”clear:float”を入れたい~!」と思っていちいち別途CSSを用意している方は多いのではないでしょうか?
CSS3にはそんな悩みを解決してくれる要素が用意されています♪

 

【1】最初だけスタイルを変える
「:first-child」

「:first-child」は連続するコードを使う時に、最初だけ違うスタイルにすることができます。 例えば、リストスタイルで役に立ってくれることがおおいです。

▼CSS
[css]
ul.us-sample{
margin: 0;
}

ul.us-sample li{
list-style-type: none;
border-bottom: 1px dotted #ccc;
}

ul.us-sample li:first-child{
color: #c00;
font-weight: bold;
}
[/css]
↑のように、「:first-child」を追加します。

▼HTML

[html]
<ul class="us-sample">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
[/html]

▼実行結果

  • 項目1
  • 項目2
  • 項目3

先頭の一行だけスタイルが適用されました♪

 

【2】最後だけスタイルを変える
「:last-child」

「:last-child」は連続するコードを使う時に、最後だけ違うスタイルにすることができます!私は回り込みをさせるときに、最後の行の後の「clear:float;」をよく指定しておきます。

▼CSS
[css]
ul.us-sample2{
margin: 0;
}

ul.us-sample2 li{
list-style-type: none;
border-bottom: 1px dotted #ccc;
}

ul.us-sample2 li:last-child{
color: #c00;
font-weight: bold;
}
[/css]
↑のように、「:last-child」を追加します。

▼HTML

[html]
<ul class="us-sample2">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
[/html]

▼実行結果

  • 項目1
  • 項目2
  • 項目3

最後の一行だけスタイルが変わりました♪

 

他にも「float」を使って回り込みをした時にその次に来る要素に「clear:both;」を使うと思いますが、このCSSを予めセットしてけば一回一回後ろに「clear:both」を追加する必要はありませんヾ(^ω^)ノ
覚えておくととっても便利ですね♪

*akane*

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でakaneをフォローしよう!

noteでも書いてます(*´ω`*)!

follow us in feedly
Feedlyで購読する!

Twitterで交流しよう!
[ [:a]最初と最後だけスタイルを変えるCSS【覚えておくと便... ]HTML+CSS, 2013/08/13 18:55