Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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で画像を丸くする方法「15秒以内にできます」

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

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

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

no image

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

最新記事

チャーさん

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

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

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