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


スポンサードサーチ

関連記事

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

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

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

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

最新記事

チャーさん

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

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

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