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の書き方

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

投稿日:2019年12月21日 更新日:

Pocket

うも、チャーさんです。

 

あなたはcssの書き方で大なり

(例 .class > p )のように書くと、

どう動くのか疑問に思ってませんか?

 

この記事では、大なりで書いた場合の

説明をしてますので、本記事を読めば、

あなたはcssの大なりの疑問がさっと解消されるでしょう。

 

 

ということで、cssの書き方にある

大なりに疑問をお持ちであれば、

このまま下にスクロールしお読みください。

 

*本記事の信憑性

この記事を書いてる僕は、

仕事で1年以上cssを書いています。

 

ということで本題に入ります。

 

スポンサードサーチ

cssの書き方で大なりと書くとどうなるか

 

cssの書き方で大なり(.class > pのような)

のがありますが、こう書くと、

その直下にあるセレクタだけが対象になります。

 

直下とはあるタグからみて、

そのすぐ下にある子階層にしか、

cssが効かないという意味です。

 

文章で見るとわかるような、

わからんようなと思うはずなので、

実際に例を見せます。

 

大なりのcss適用例

 

ということで大なり (.class > p)を

使ってcssを書くと以下の画像のようになります。

 

css 書き方 大なり

 

ご覧いただいた通り、

テキスト3だけcssが効いてなくて、

他のテキストにはcssが効いてますね。

 

これは、なぜかというとテキスト3は、

.textのdivタグからみて孫の階層にあたるからです。

 

 

でそれとは別に、他のテキストは、

.textのdivタグからみて、

子の階層にあたるからです。

 

つまり大なりを使うと、

そのタグからみて一個下の階層に属する、

要素にのみcssが効くという書き方になるのです。

 

 

よりわかりやすくするために

対比として別の例をお見せしましょう、

以下の画像のように大なりを書かないで書くと、

 

css 書き方 大なりじゃない場合

このように.textのdivタグの中にある、

pタグ要素全てにcssが効きました。

 

これで違いがわかったと思いますが、

 

cssで大なりをつけて書くと、

その要素からみて直下、すぐ真下にある

子階層の指定した要素にしかcssが効かないのです。

 

スポンサードサーチ

大なりの使用用途

 

でこれで大なりで書いた場合の

cssの適用のされ方がわかったと思いますが、

使用用途について説明しましょう。

 

使い道は、子階層に属する要素だけに

cssを適用したい場合です。

 

 

別の例で紹介したように、

大なりなしで書くと、子も孫も

関係なく全部cssが適用されます。

 

なので、すぐ下にのみ、cssを適用したい

そんな場合に使いましょう。

 

スポンサードサーチ

大なりは続けて書くこともできる

 

また大なりは続けて書くこともできます。

要素 > 要素 > 要素

みたいな感じにです。

 

こう書くと、指定した要素の、

子要素の子要素にcssを適用する

という意味になります。

 

わかりやすさのためまた例を出します。

お話に出たように、大なりを続けて書くと、

以下のようになります。

 

css 書き方 大なり

今度はテキスト3のみcssが効きましたね。

このように大なりは続けて書くと、

 

指定した子要素のさらに指定した子要素にのみ

cssを適用できます。

 

 

まぁそれやったらその孫要素に、

別途クラス振ったらええやんという

声も出そうですが、(そのほうが多分楽です)

 

大なりを続けて書くと、

こういう動きになりますよ、という説明でした。

 

スポンサードサーチ

大なりで書く場合の注意

 

で、注意ですが、

この大なりですが、使う場合は、

変更が少ない場所に、使いましょう。

 

というのも、要素が加わると、

cssが効かなくなるからです。

 

 

例えば、

<div class=”texts”>
 <p>テキスト1</p>
 <p>テキスト2</p>

</div>

 

というのがあって、

.texts >pでなんかcss

書いてるとしましょう。

 

 

そんな中、変更が加わり、

<div class=”texts”>
 <p>テキスト1</p>

 <div>
  <p>テキスト2</p>

 </div>

</div>

 

と変わったとしましょう。

 

するとテキスト2には指定してた

cssが効かなくなります。

 

 

ので、cssを書き直さないといけなくなります。

(つまり面倒です)

 

なぜなら大なりで書くと、直下にしか

cssが効かないからです。

 

なので変更が多い場所には、

この書き方は非常に不向きです。

 

 

ということで、変更が加わらない場所に

対して使うようにしましょう。

 

スポンサードサーチ

まとめ

 

また、cssの書き方には今回紹介した、

大なり以外にも、カンマを使った書き方や

まとめて書く方法もあります。

 

これらをあなたが知っておくと、

cssを書く際に非常にはかどるので、

cssをもっと楽に楽しく書きたいなら知っておきましょう。

 

cssを書くあなたにおすすめの記事

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

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

cssの書き方をまとめました「よく使う内容を網羅」

 

では読んでもらってありがとうございました。

チャーさん

-css, cssの書き方

スポンサードサーチ

関連記事

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

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

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

no image

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

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

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

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

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

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

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

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

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

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

no image

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

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

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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