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

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

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

no image

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

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

no image

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

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

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

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

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

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

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

no image

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

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

no image

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

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

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

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

no image

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

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

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

最新記事

チャーさん

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

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

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