http://weboook.blog22.fc2.com/blog-entry-268.html
- E F (子孫要素に適用)
- E > F (子要素にのみ適用)
上記サイトの↑の違いについて教えてください
サイトを見る限りどちらも<p>タグの中</p>という同じ意味に見えます
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
E>F
は子要素だけにマッチしますが、E F
は孫要素にもマッチします。
HTML
1<style> 2.sample span { 3 color: red; 4} 5.sample>span { 6 color: green; 7} 8</style> 9</head> 10<body> 11<div class="sample"><span>子要素</span></div> 12<div class="sample"><span><span>孫要素</span></span></div>
投稿2015/10/13 07:21
編集2015/10/13 07:32総合スコア18164
0
ベストアンサー
- E F (子孫要素に適用)
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSSセレクタ</title> 6 <style> 7 .hoge p { 8 color: #0ff; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="hoge"> 14 <p>子要素</p> 15 <div class="fuge"> 16 <p>孫要素</p> 17 </div> 18 </div> 19 </body> 20</html>
このケースの場合、hogeというクラス名を持つdiv要素の中に子要素のpと孫要素のpの両方とも赤くなります。
この時に子要素のみ赤くしたいのであれば、
5. E > F (子要素にのみ適用)
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSSセレクタ</title> 6 <style> 7 .hoge > p { 8 color: #0ff; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="hoge"> 14 <p>子要素</p> 15 <div class="fuge"> 16 <p>孫要素</p> 17 </div> 18 </div> 19 </body> 20</html>
このようなセレクタ指定をすればいいということです。
「>」前のセレクタの直下にあるものだけ指定ができますよ
投稿2015/10/14 03:03
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。