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

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

最新記事

チャーさん

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

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

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