divの中のpの中のaの中のimgにCSSを適応させるにはどのように書けば良いですか？

Question

雑な質問で恐縮です。タイトルの通りです。divの中のpの中のaの中のimgにCSSを適応させたいのですが、imgのクラスだけを指定してもcssが効きません。

Comments

[退会済みユーザー]

cssプリプロセッサだとかフロントエンド向けフレーム枠など何か組み込んでいるなら、その旨書いてほしいです。

Answer 1

divの中のpの中のaの中のimgにCSSを適応させたいのですが、imgのクラスだけを指定してもcssが効きません。

「中」が「孫要素」なのか「子要素」なのかによって記述が変わりますが、子孫要素と仮定するなら「子孫結合子」、子要素と仮定するなら「子結合子」で表現できます。
後述の通り、他に詳細性の高いセレクタが存在しなければ、期待通りに動作するはずです。

子結合子 (Child combinator)

/* 子結合子 */
div>p>a>img {}

子孫結合子 (Descendant combinator)

>> は Selectors 4 で拡張された記法ですが、2017/08/01現在では実装されているブラウザがほとんどない為、まだ使用すべきではありません。

• Explicit descendant combinator >> - Can I use...

/* 子孫結合子 */
div p a img {}
div>>p>>a>>img {} /* この文法は実装されているブラウザがほとんどない為、まだ使用すべきではありません */

セレクタの詳細性を計算する

セレクタの優先順位は詳細性(specificity)によって計算できます。
最新仕様である Selectors Level 4 になると複雑になるので、CSS 2 から覚えると良いかもしれません。
なお、詳細性が同じセレクタの場合は、後述のセレクタによって上書きされます(後述の方が優先順位が高い)。

• セレクタの詳細性を計算する - 正しい知識を得たい人の爲のCSS2リファレンス
• 15. Calculating a selector's specificity - Selectors Level 4
• 16. 選択子の詳細度の計算法 - Selectors Level 4 （日本語訳）

*               /* a=0 b=0 c=0 */
LI              /* a=0 b=0 c=1 */
UL LI           /* a=0 b=0 c=2 */
UL OL+LI        /* a=0 b=0 c=3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 */
UL OL LI.red    /* a=0 b=1 c=3 */
LI.red.level    /* a=0 b=2 c=1 */
#x34y           /* a=1 b=0 c=0 */
#s12:not(FOO)   /* a=1 b=0 c=1 */
.foo :matches(.bar, #baz)   /*
合致する要素に依存して， (a, b, c) = (0, 2, 0) または (1, 1, 0) のいずれかになる。  */

詳細性は繰り上げされない

「a=1 b=0 c=0」の詳細性を「100」と表現している解説サイトがありますが、厳密にはこれは間違いで誤解の元です。
(説明が分かりやすいので紹介しましたが、前述の 正しい知識を得たい人の爲のCSS2リファレンス が「100」と表現しています)

「100」のような一つの十進数値で表現してしまうと、「a=0 b=10 c=0」が「100」に繰り上げされそうに思えますが、実際には繰り上げされません。
「a=0 b=10 c=0」は「0-10-0」と見るのが正解で「a=1 b=0 c=0」よりも詳細性が低いと評価されます。

• CSSにおけるセレクタの固有性(詳細度)の計算式 - @think49の日記

開発者ツール

詳細性は計算すれば出ますが、全てのセレクタを網羅するのは大変なので、開発者ツールを活用する事をお勧めします。
開発者ツールを使えば、上書きされたセレクタは「打ち消し線」で表現されます。

• ページとスタイルの調査と編集  |  Web  |  Google Developers

Re: AliciaKeys さん

Answer 2

CSSの優先順位で調べてください。

Answer 3

質問者さんが実際に指定しているCSSとHTMLのコードを提示して頂かないと、何とも言えません。
CSSやHTML指定が正しく記載されていれば効きます。
ブロック要素やインライン要素等の違いもありますので、まずはコードを提示して下さい。

Answer 4

直下でなくてもいいのであれば半角スペースで区切るだけです
競合する設定がないかはよく確認したほうがいいでしょう
（どうしても競合を外せない場合は優先順位をあげるしかない）