CSSの`:first-of-type`,` :last-of-type`は、要素の中で最初の要素や最後の要素を指定するための擬似クラスです。 ## :first-of-type `:first-of-type`は、要素の中で最初に現れる要素を指定するための擬似クラスです。例えば、以下のようなHTMLがあった場合、`:first-of-type`を使って、最初のli要素にスタイルを適用することができます。 ```html-preview

りんご
バナナ
みかん

``` この場合、最初のli要素（りんご）に赤色の文字色が適用されます。 ## :last-of-type `:last-of-type`は、要素の中で最後に現れる要素を指定するための擬似クラスです。例えば、以下のようなHTMLがあった場合、`:last-of-type`を使って、最後のli要素にスタイルを適用することができます。 ```html-preview

りんご
バナナ
みかん

``` この場合、最後のli要素（みかん）に青色の文字色が適用されます。 ## 例1: ナビゲーションバーの最初と最後の要素にスタイルを適用するナビゲーションバーの最初の要素には、左端に角丸をつけたいと思った場合、以下のようにCSSを書くことができます。 ```html-preview ``` また、ナビゲーションバーの最後の要素には、右端に角丸をつけたいと思った場合、以下のようにCSSを書くことができます。 ```html-preview ``` ## 例2: フォームの最初と最後の要素にスタイルを適用するフォームの最初の要素には、上部に余白をつけたいと思った場合、以下のようにCSSを書くことができます。 ```html-preview ``` また、フォームの最後の要素には、下部に余白をつけたいと思った場合、以下のようにCSSを書くことができます。 ```html-preview ```

スキル図鑑

クイズにチャレンジしよう！