css

cssを最初の要素にのみ適用する方法

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssを最初の要素にのみ、

適用させたいがどうしたらいいか悩んでませんか?

 

この記事では、cssを最初の要素にのみ、

適用させれる方法を紹介してます。

 

 

なので、あなたがこの記事を読めば、

cssを最初の要素にのみ適用するということが、

できるようになるでしょう。

 

ということで、cssを最初の要素に適用したい、

そんな場合はこのまま下にスクロールして、

読んでみてください。

 

スポンサードサーチ

cssを最初の要素にのみ適用させたいならコレ

 

はい、で結論からですが、cssを最初の要素にのみ、

適用させたい、そんな場合は、

first-childというcssを使いましょう。

 

そうすれば、一番最初の要素だけに、

cssを適用するということができます。

 

ということで、早速実際にみていきましょう。

 

 

まずはhtmlを用意しました。

cssを最初の要素にだけ適用したい

 

で、この1番目のpタグで囲った部分だけに、

cssを適用したいとしましょう。

 

そこで、使うのが先ほどご紹介した、

こちらのfirst-childです。

 

 

で、実際に適用すると、、

 

cssを最初の要素にだけ適用したい

 

 

はい、このように、最初のpタグで囲った、

これは1番目のpタグという文だけに、

cssの背景色が適用されてますね。

 

このようにfirst-childというcssを使えば、

最初の要素にだけ、cssを適用するということが、

できます。

 

 

で、書き方ですが、

 

要素名:first-child {

ここにcssの記述をかく

}

 

になります。

 

 

先ほど紹介した例では、

pタグだったので、

 

p:first-child {

css記述

}

 

という感じになりました。

 

 

クラスの場合

 

で、ちなみにですが、

first-childはクラスの場合にも使えます。

 

例えば同じクラス名が振ってある要素達の中で、

最初の要素にのみcssを適用したい。

 

そんな場合も、first-childが使えまして、

適用すると、タグの時と同じ結果になります。

 

 

cssを最初の要素にだけ適用したい

 

書き方は、

.class名:first-child {

css記述をここにかく

}

 

という風にすればよく、

僕が紹介した例を使うならば、

 

.txt:first-child {

cssをここにかく

}

 

という感じですね。

 

 

まぁとはいえクラスの場合は、

cssを適用したい最初の要素にのみ別のクラス名を書けば、

解決ですが、

 

クラス名でもできますよということですね。

 

 

スポンサードサーチ

まとめ

 

はい、とゆうことで、まとめに入ります。

 

あなたがcssを最初の要素にのみ、

適用したいという場合は、first-childを使いましょう。

 

 

書き方は、

要素名:first-child { 

css記述

}

です。

 

クラスの場合も同様です。

 

 

はい、とゆうことで早速あなた自身でも、

cssを最初の要素にのみ適用するというのを、

試してみましょう。

 

書き方は、要素名:first-child { }

です。

 

 

では早速試して、あなたのコーディングスキルを、

高めてしまいましょう。

 

それでは、読んでいただいて、

ありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。