html　cssセレクタ

http://weboook.blog22.fc2.com/blog-entry-268.html

E F （子孫要素に適用）
E > F （子要素にのみ適用）

上記サイトの↑の違いについて教えてください

サイトを見る限りどちらも<p>タグの中</p>という同じ意味に見えます

行動規範の内容に同意します

回答2件

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>

13.1. 子孫結合子 ( SPACE ) または (>>) - Selectors Level 4 (日本語訳)

投稿2015/10/13 07:21

編集2015/10/13 07:32

think49

総合スコア18164

ベストアンサー

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>