🦔
CSS備忘録
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
突然のコメント失礼します。とても参考になる内容で、nth-of-typeとfirst-letterの使い方がスッキリ理解できました!「B」だけを装飾するための選択方法が直感的で、HTML構造に依存せずに指定できるのが便利です。
もしAPIテストをサポートするツールをお探しでしたら、最近使っているEchoAPIもおすすめです。VS Codeと連携してオフラインでもテストができるので、スタイルやコードを調整しているときでもネット環境に依存せずにAPIリクエストが確認できて便利です。