🦔

CSS備忘録

2024/10/27に公開1

nth-of-type(n)とfirst-letter

[目的]
「B」の文字だけをcssで装飾したい。

[方法]
疑似要素を使用する。

  • 「nth-of-child(n)」で、一部の要素のみを指定する。
  • 「first-letter」で、最初の行の最初の文字にスタイルを適用させる。

[備考]

  • 「nth-child」は、全てのセレクタを数える。pを指定しても、h1やh3なども数えられる。
  • 「nth-of-type」は、指定したセレクタのみを数える。pを指定すれば、h1やh3は数えられない。

[html]

<div>
    <div class="contents">
        <h2>タイトル1</h2>
        <p>Aあいうえお</p>
        <p>Bかきくけこ</p>
    </div>
    <div class="contents">
        <h2>タイトル2</h2>
        <p>Aさしすせそ</p>
        <p>Bたちつてと</p>
    </div>
    <div class="contents">
        <h2>タイトル3</h2>
        <p>Aなにぬねの</p>
        <p>Bはひふへほ</p>
    </div>
</div>

[css]
p:nth-of-child(2)で子要素(p要素)を指定→その要素に対して、::first-letterを設定する。

p:nth-of-child(2)::first-letter{
    /* 装飾 */
}

Discussion

HikaruooHikaruoo

突然のコメント失礼します。とても参考になる内容で、nth-of-typeとfirst-letterの使い方がスッキリ理解できました!「B」だけを装飾するための選択方法が直感的で、HTML構造に依存せずに指定できるのが便利です。

もしAPIテストをサポートするツールをお探しでしたら、最近使っているEchoAPIもおすすめです。VS Codeと連携してオフラインでもテストができるので、スタイルやコードを調整しているときでもネット環境に依存せずにAPIリクエストが確認できて便利です。