2016-04-12 10 views
-2

Googleマップの情報ウィンドウのスタイルを設定しようとしています。CSS擬似クラス:n番目の子の問題

私はこれをターゲットにしたいが、私はこれを行うとき、私だけではなく、ターゲットてるようしかし、それはそう enter image description here

これは私が

.gm-style div div:nth-child(3) div:nth-child(4) div div div:nth-child(2) { 
background: white !important; 
border-radius: 0px !important; 
box-shadow:0px 0px 60px 0px rgba(0, 0, 0, 0.07); 
} 

をしたいのdivを対象とする唯一の方法であるように思わDIV私のdivは他のdivも同様です。

enter image description here

任意のアイデアなぜですか?

+1

質問を求めるヘルプは、質問自体にそれを再現するのに必要な最短コードを含める必要があります**好ましくは[** Stack Snippet **](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)にあります。 [**最小限で完全で検証可能なサンプルの作成方法**](http://stackoverflow.com/help/mcve)を参照してください。 –

答えて

1

あなたがセレクタで十分に具体的ではないからです。 .gm-style divに適用されます。div要素は、直接の子だけでなく、.gm-styleに含まれます。ご提供いただいたスクリーンショットに基づいて

、あなたが使用して、この要素を選択することができます。

.gm-style > div > div:nth-child(3) > div:nth-child(4) > div > div > div:nth-child(2) 

ノートを行うことを特定の子ではありませんそれらのdiv要素のいずれかが自分の要素を持っている場合、このかかわらずあなたが同様に彼らの特定の子なインデックスを選択する必要があるかもしれませんので、また、それらを選択することがあります。

.gm-style > div:first-child > div:nth-child(3) > div:nth-child(4) > div:first-child > div:first-child > div:nth-child(2) 

しかし、少しやり過ぎかもしれ完全なコードを見ず。 n番目の-の型(:

-1

>のdiv> divの私は、「それは私には参考になるよう、」あなたが持っている完全なHTMLが表示されませんが、どのような方法は、あなたがこの

.gmスタイルを試すことができます3)> div:nth-​​of-type(4)> div> div> div:nth-​​of-type(2)