回答編集履歴
2
文面の修正
answer
CHANGED
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
### 子結合子と子孫結合子
|
|
2
|
-
|
|
3
1
|
> divの中のpの中のaの中のimgにCSSを適応させたいのですが、imgのクラスだけを指定してもcssが効きません。
|
|
4
2
|
|
|
5
3
|
「中」が「孫要素」なのか「子要素」なのかによって記述が変わりますが、子孫要素と仮定するなら「子孫結合子」、子要素と仮定するなら「子結合子」で表現できます。
|
|
4
|
+
後述の通り、他に詳細性の高いセレクタが存在しなければ、期待通りに動作するはずです。
|
|
6
5
|
|
|
6
|
+
### 子結合子 (Child combinator)
|
|
7
|
+
|
|
8
|
+
```CSS
|
|
9
|
+
/* 子結合子 */
|
|
10
|
+
div>p>a>img {}
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### 子孫結合子 (Descendant combinator)
|
|
14
|
+
|
|
15
|
+
`>>` は Selectors 4 で拡張された記法ですが、2017/08/01現在では実装されているブラウザがほとんどない為、まだ使用すべきではありません。
|
|
16
|
+
|
|
7
17
|
- [Explicit descendant combinator >> - Can I use...](http://caniuse.com/#feat=css-descendant-gtgt)
|
|
8
18
|
|
|
9
19
|
```CSS
|
|
10
20
|
/* 子孫結合子 */
|
|
11
21
|
div p a img {}
|
|
12
22
|
div>>p>>a>>img {} /* この文法は実装されているブラウザがほとんどない為、まだ使用すべきではありません */
|
|
13
|
-
|
|
14
|
-
/* 子結合子 */
|
|
15
|
-
div>p>a>img {}
|
|
16
23
|
```
|
|
17
24
|
|
|
18
|
-
後述の通り、他に詳細性の高いセレクタが存在しなければ、期待通りに動作するはずです。
|
|
19
|
-
セレクタの上書き状況は、開発者ツールを使えば分かります。
|
|
20
|
-
|
|
21
|
-
- [ページとスタイルの調査と編集 | Web | Google Developers](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?hl=ja)
|
|
22
|
-
|
|
23
25
|
### セレクタの詳細性を計算する
|
|
24
26
|
|
|
25
27
|
セレクタの優先順位は詳細性(specificity)によって計算できます。
|
|
26
28
|
最新仕様である Selectors Level 4 になると複雑になるので、CSS 2 から覚えると良いかもしれません。
|
|
27
29
|
なお、詳細性が同じセレクタの場合は、後述のセレクタによって上書きされます(後述の方が優先順位が高い)。
|
|
28
30
|
|
|
29
|
-
- [セレクタの詳細性を計算する - CSS2リファレンス](http://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity)
|
|
31
|
+
- [セレクタの詳細性を計算する - 正しい知識を得たい人の爲のCSS2リファレンス](http://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity)
|
|
30
32
|
- [15. Calculating a selector's specificity - Selectors Level 4](https://www.w3.org/TR/selectors4/#specificity)
|
|
31
33
|
- [16. 選択子の詳細度の計算法 - Selectors Level 4 （日本語訳）](https://triple-underscore.github.io/selectors4-ja.html#specificity-rules)
|
|
32
34
|
|
|
@@ -47,9 +49,18 @@
|
|
|
47
49
|
### 詳細性は繰り上げされない
|
|
48
50
|
|
|
49
51
|
「a=1 b=0 c=0」の詳細性を「100」と表現している解説サイトがありますが、厳密にはこれは間違いで誤解の元です。
|
|
52
|
+
(説明が分かりやすいので紹介しましたが、前述の [正しい知識を得たい人の爲のCSS2リファレンス](http://hp.vector.co.jp/authors/VA022006/css/index.html) が「100」と表現しています)
|
|
53
|
+
|
|
50
54
|
「100」のような一つの十進数値で表現してしまうと、「a=0 b=10 c=0」が「100」に繰り上げされそうに思えますが、実際には繰り上げされません。
|
|
51
55
|
「a=0 b=10 c=0」は「0-10-0」と見るのが正解で「a=1 b=0 c=0」よりも詳細性が低いと評価されます。
|
|
52
56
|
|
|
53
57
|
- [CSSにおけるセレクタの固有性(詳細度)の計算式 - @think49の日記](http://d.hatena.ne.jp/think49/20141017/1413520863)
|
|
54
58
|
|
|
59
|
+
### 開発者ツール
|
|
60
|
+
|
|
61
|
+
詳細性は計算すれば出ますが、全てのセレクタを網羅するのは大変なので、開発者ツールを活用する事をお勧めします。
|
|
62
|
+
開発者ツールを使えば、上書きされたセレクタは「打ち消し線」で表現されます。
|
|
63
|
+
|
|
64
|
+
- [ページとスタイルの調査と編集 | Web | Google Developers](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?hl=ja)
|
|
65
|
+
|
|
55
66
|
Re: AliciaKeys さん
|
1
typo修正
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> divの中のpの中のaの中のimgにCSSを適応させたいのですが、imgのクラスだけを指定してもcssが効きません。
|
|
4
4
|
|
|
5
|
-
「中」が「孫要素」なのか「子要素」なのかによって記述
|
|
5
|
+
「中」が「孫要素」なのか「子要素」なのかによって記述が変わりますが、子孫要素と仮定するなら「子孫結合子」、子要素と仮定するなら「子結合子」で表現できます。
|
|
6
6
|
|
|
7
7
|
- [Explicit descendant combinator >> - Can I use...](http://caniuse.com/#feat=css-descendant-gtgt)
|
|
8
8
|
|