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

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

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

no image

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

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

no image

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

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

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

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

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

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

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

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

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

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

最新記事

チャーさん

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

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

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