CSS子セレクタのターゲットと理解

Question

クラス.textbox-fillをターゲットにして、各ボックス要素の背景色とテキストの色を変更しようとしています。たとえば、.textbox-fillの最初の子は灰色でなければなりません。二番目の子は白でなければなりません。 3番目の子は、身長をやや調整したいと思います。

私はnth-childセレクタ#About-Container .about-inner-content article:nth-child(1n+2) .textbox-fillを使用してみましたが、何も動作しないようです。 Example here

<article class="col-sm-6 grid-tile"> 

    <div class="textbox-fill"> 
    <div class="about-textbox"> 
    <h2>Some text</h2> 
    <p>Some text</p> 

</div> 
</div> 
    </article> 

私は過去にこの問題が発生していると私はそれを解決する方法は100％わかりません。私はこの主題に関するいくつかの記事と記事を読んだ。私は基本を理解していますが、このようなもっと複雑なものは、私はいつも試行錯誤の方法でアプローチしました。

誰でもこの問題を解決できる方法を知っていますか？

Answer 1

あなた.textbox-fillがarticle内部にあるので、それはarticleあなたはそれが親

外で見ることができないように、ターゲットとしてnth-childを使用してtext-fillが動作しません、で開始する必要があるが、だからこれ好きです代わりに

article:nth-child(1) .textbox-fill { 
 
    color: red; 
 
} 
 

 
article:nth-child(2) .textbox-fill { 
 
    color: lime; 
 
} 
 

 
article:nth-child(3) .textbox-fill { 
 
    color: blue; 
 
}

<article class="col-sm-6 grid-tile"> 
 

 
    <div class="textbox-fill"> 
 
    <div class="about-textbox"> 
 
     <h2>Some text</h2> 
 
     <p>Some text</p> 
 

 
    </div> 
 
    </div> 
 
</article> 
 

 
<article class="col-sm-6 grid-tile"> 
 

 
    <div class="textbox-fill"> 
 
    <div class="about-textbox"> 
 
     <h2>Some text</h2> 
 
     <p>Some text</p> 
 

 
    </div> 
 
    </div> 
 
</article> 
 

 
<article class="col-sm-6 grid-tile"> 
 

 
    <div class="textbox-fill"> 
 
    <div class="about-textbox"> 
 
     <h2>Some text</h2> 
 
     <p>Some text</p> 
 

 
    </div> 
 
    </div> 
 
</article>

我々トンの場合アルク.textbox-fillさん.about-textboxの子、h2とpについては、次のように行う、あなたが*:nth-childでグローバルセレクタ*を使用する場合は、子供のように、異なるタイプのものであり

.textbox-fill .about-textbox *:nth-child(1) { 
 
    color: red; 
 
} 
 

 
.textbox-fill .about-textbox *:nth-child(2) { 
 
    color: lime; 
 
}

<article class="col-sm-6 grid-tile"> 
 

 
    <div class="textbox-fill"> 
 
    
 
    <div class="about-textbox"> 
 
     
 
     <h2>Some text</h2> 
 
     <p>Some text</p> 
 
     
 
    </div> 
 
    
 
    </div> 
 
</article>

Answer 2

あなたのようないくつかの子供たちと.textbox-fill、お持ちの場合：それの最初の子であるすべてのdiv要素がないので、何を対象としません今

div.textbox-fill 
    h1#header 
    div#firstDiv 
    div#secondDiv 
    article#someArticle 
    div#thirdDiv 

、.textbox-fill div:first-childを親だ（.textboxフィル） 。 .textbox-fill div:first-of-typeはdiv#firstDivをターゲットにしますが。 .textbox-fill div:nth-child(2)はまた、div#firstDivをターゲットにします。 div#thirdDivは.textbox-fill div:nth-of-type(3)または.textbox-fill div:nth-child(5)または.textbox-fill div:last-childまたは.textbox-fill div:last-of-typeになります。

あなたのような、.textbox-fill特定のサイトにありますが、異なる両親とターゲットにする場合：

div.something 
    div.textbox-fill 
[...] 
article#other 
    div.textbox-fill 

あなたはnth-childもnth-of-typeを使用して、それをターゲットにすることはできません。サイトツリーに基づいて別の方法を見つける必要があります。