どうも、チャーさんです。
あなたはcssを最初の要素にのみ、
適用させたいがどうしたらいいか悩んでませんか？
この記事では、cssを最初の要素にのみ、
適用させれる方法を紹介してます。
なので、あなたがこの記事を読めば、
cssを最初の要素にのみ適用するということが、
できるようになるでしょう。
ということで、cssを最初の要素に適用したい、
そんな場合はこのまま下にスクロールして、
読んでみてください。
スポンサードサーチ
cssを最初の要素にのみ適用させたいならコレ
はい、で結論からですが、cssを最初の要素にのみ、
適用させたい、そんな場合は、
first-childというcssを使いましょう。
そうすれば、一番最初の要素だけに、
cssを適用するということができます。
ということで、早速実際にみていきましょう。
まずはhtmlを用意しました。
で、この１番目のpタグで囲った部分だけに、
cssを適用したいとしましょう。
そこで、使うのが先ほどご紹介した、
こちらのfirst-childです。
で、実際に適用すると、、
はい、このように、最初のpタグで囲った、
これは１番目のpタグという文だけに、
cssの背景色が適用されてますね。
このようにfirst-childというcssを使えば、
最初の要素にだけ、cssを適用するということが、
できます。
で、書き方ですが、
要素名：first-child {
ここにcssの記述をかく
}
になります。
先ほど紹介した例では、
pタグだったので、
p:first-child {
css記述
}
という感じになりました。
クラスの場合
で、ちなみにですが、
first-childはクラスの場合にも使えます。
例えば同じクラス名が振ってある要素達の中で、
最初の要素にのみcssを適用したい。
そんな場合も、first-childが使えまして、
適用すると、タグの時と同じ結果になります。
書き方は、
.class名:first-child {
css記述をここにかく
}
という風にすればよく、
僕が紹介した例を使うならば、
.txt:first-child {
cssをここにかく
}
という感じですね。
まぁとはいえクラスの場合は、
cssを適用したい最初の要素にのみ別のクラス名を書けば、
解決ですが、
クラス名でもできますよということですね。
スポンサードサーチ
まとめ
はい、とゆうことで、まとめに入ります。
あなたがcssを最初の要素にのみ、
適用したいという場合は、first-childを使いましょう。
書き方は、
要素名:first-child {
css記述
}
です。
クラスの場合も同様です。
はい、とゆうことで早速あなた自身でも、
cssを最初の要素にのみ適用するというのを、
試してみましょう。
書き方は、要素名:first-child { }
です。
では早速試して、あなたのコーディングスキルを、
高めてしまいましょう。
それでは、読んでいただいて、
ありがとうございました。
チャーさん
