どうも、チャーさんです。
あなたはcssの書き方で大なり
(例 .class > p )のように書くと、
どう動くのか疑問に思ってませんか？
この記事では、大なりで書いた場合の
説明をしてますので、本記事を読めば、
あなたはcssの大なりの疑問がさっと解消されるでしょう。
ということで、cssの書き方にある
大なりに疑問をお持ちであれば、
このまま下にスクロールしお読みください。
＊本記事の信憑性
この記事を書いてる僕は、
仕事で１年以上cssを書いています。
ということで本題に入ります。
スポンサードサーチ
cssの書き方で大なりと書くとどうなるか
cssの書き方で大なり（.class > pのような）
のがありますが、こう書くと、
その直下にあるセレクタだけが対象になります。
直下とはあるタグからみて、
そのすぐ下にある子階層にしか、
cssが効かないという意味です。
文章で見るとわかるような、
わからんようなと思うはずなので、
実際に例を見せます。
大なりのcss適用例
ということで大なり (.class > p)を
使ってcssを書くと以下の画像のようになります。
ご覧いただいた通り、
テキスト３だけcssが効いてなくて、
他のテキストにはcssが効いてますね。
これは、なぜかというとテキスト３は、
.textのdivタグからみて孫の階層にあたるからです。
でそれとは別に、他のテキストは、
.textのdivタグからみて、
子の階層にあたるからです。
つまり大なりを使うと、
そのタグからみて一個下の階層に属する、
要素にのみcssが効くという書き方になるのです。
よりわかりやすくするために
対比として別の例をお見せしましょう、
以下の画像のように大なりを書かないで書くと、
このように.textのdivタグの中にある、
pタグ要素全てにcssが効きました。
これで違いがわかったと思いますが、
cssで大なりをつけて書くと、
その要素からみて直下、すぐ真下にある
子階層の指定した要素にしかcssが効かないのです。
スポンサードサーチ
大なりの使用用途
でこれで大なりで書いた場合の
cssの適用のされ方がわかったと思いますが、
使用用途について説明しましょう。
使い道は、子階層に属する要素だけに
cssを適用したい場合です。
別の例で紹介したように、
大なりなしで書くと、子も孫も
関係なく全部cssが適用されます。
なので、すぐ下にのみ、cssを適用したい
そんな場合に使いましょう。
スポンサードサーチ
大なりは続けて書くこともできる
また大なりは続けて書くこともできます。
要素 > 要素 > 要素
みたいな感じにです。
こう書くと、指定した要素の、
子要素の子要素にcssを適用する
という意味になります。
わかりやすさのためまた例を出します。
お話に出たように、大なりを続けて書くと、
以下のようになります。
今度はテキスト３のみcssが効きましたね。
このように大なりは続けて書くと、
指定した子要素のさらに指定した子要素にのみ
cssを適用できます。
まぁそれやったらその孫要素に、
別途クラス振ったらええやんという
声も出そうですが、（そのほうが多分楽です）
大なりを続けて書くと、
こういう動きになりますよ、という説明でした。
スポンサードサーチ
大なりで書く場合の注意
で、注意ですが、
この大なりですが、使う場合は、
変更が少ない場所に、使いましょう。
というのも、要素が加わると、
cssが効かなくなるからです。
例えば、
<div class=”texts”>
<p>テキスト１</p>
<p>テキスト２</p>
</div>
というのがあって、
.texts >pでなんかcss
書いてるとしましょう。
そんな中、変更が加わり、
<div class=”texts”>
<p>テキスト１</p>
<div>
<p>テキスト２</p>
</div>
</div>
と変わったとしましょう。
するとテキスト２には指定してた
cssが効かなくなります。
ので、cssを書き直さないといけなくなります。
（つまり面倒です）
なぜなら大なりで書くと、直下にしか
cssが効かないからです。
なので変更が多い場所には、
この書き方は非常に不向きです。
ということで、変更が加わらない場所に
対して使うようにしましょう。
スポンサードサーチ
まとめ
また、cssの書き方には今回紹介した、
大なり以外にも、カンマを使った書き方や
まとめて書く方法もあります。
これらをあなたが知っておくと、
cssを書く際に非常にはかどるので、
cssをもっと楽に楽しく書きたいなら知っておきましょう。
cssを書くあなたにおすすめの記事
では読んでもらってありがとうございました。
チャーさん
