質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

5113閲覧

css 直下セレクタの挙動について

pythago

総合スコア47

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/05/11 03:18

編集2016/05/11 04:35

###発生している問題・エラーメッセージ
cssで直下セレクタを用いる場合に、子セレクタだけではなく、さらに下の階層まで効いてしまいます。

###該当のソースコード

html

1<body> 2 <ul class="big"> 3 <li>11</li> 4 <li>12 5 <ul class="mid"> 6 <li>1</li> 7 <li>2</li> 8 <li>3</li> 9 </ul> 10 </li> 11 <li>13</li> 12 <li>14</li> 13 <li>15</li> 14 </ul> 15</body> 16

css

1.big .mid{ 2 color: yellow; 3} 4.big > li{ 5 color: green; 6} 7.big { 8 color: red; 9}

###試したこと
具体的には、、、
上記の状態では1115が緑に表示され13に黄色が表視されるのですが、color: yellowを効かなくする(下記に記載)と、すべての文字が緑になってしまいます。どうしてでしょうか?
予想では1~3は赤色になると予想していたのですが・・・

css

1.big .mid{ 2 /*color: yellow;*/ 3} 4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/11 03:20

「color:green;を効かなくする」コードも追記ください。また、コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
pythago

2016/05/11 04:31

今追記いたしました。 質問が初めてな為、見にくい状態になってしまい申し訳ないです。
guest

回答2

0

ベストアンサー

color は継承するので .big > li 以下の要素すべて(特に指定が無い場合)に適用されます。

【ほんっとにはじめてのHTML5とCSS3:【5】CSSの値の継承(Inheritance)のルール】
http://honttoni.blog74.fc2.com/blog-entry-219.html

投稿2016/05/11 04:41

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pythago

2016/05/11 04:53

継承するものと継承しない要素があるのですね! よく分かりました!! ありがとうございます
guest

0

CSS セレクタは詳細度のよって優先順位が決定されます。

color:green; を効かなくすると、すべての文字が緑になってしまいます。

再現できませんでした。
.big > li がコメントアウトされた場合、優先順位の高い .big .mid が優先されます。
以下、検証コードですが、color: yellow が視認しづらかったので blue に変更してます。

Re: pythago さん

投稿2016/05/11 03:40

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pythago

2016/05/11 04:33

検証までしていただき申し訳ないです。 大事な部分が間違っており、訂正させていただきました。 color:green;を効かなくではなく、正しくはcolor:yellow;を効かなくでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問