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

スポンサードサーチ

関連記事

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

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

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

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

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

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

no image

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

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

no image

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

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

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

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

no image

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

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

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

最新記事

チャーさん

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

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

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