targeting and understanding CSS child selectors - html

Question

I'm trying to target the class, .textbox-fill to change the background colour and text colour for each individual box element. For example .textbox-fill's first-child should be grey. The second-child should be white. The third child I want to adjust the height slight and so on.
I have tried using the nth-child selector #About-Container .about-inner-content article:nth-child(1n+2) .textbox-fill nothing seems to work. 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>
I have encounter this issue in the past and I'm not 100% sure how I resolved it. I have read several articles and posts on this subject. I understand the basics, however something more complex like this I always approached with trial and error method.
Does anyone know how I can solve this issue?

Answer 1

Since your .textbox-fill is inside the article, it is the article you need to start with, as target the text-fill using nth-child will not work as it can't see outside its parent
So do like this instead
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>
If we talk about the .textbox-fill's .about-textbox's children, the h2 and p, do like this, where you use the global selector * in *:nth-child, as the children is of different types
.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

If you have a .textbox-fill with several children, like:
div.textbox-fill
h1#header
div#firstDiv
div#secondDiv
article#someArticle
div#thirdDiv
Now, .textbox-fill div:first-child will target nothing, because there isn't any div that is a first child of it's parent (.textbox-fill). Although .textbox-fill div:first-of-type will target div#firstDiv. .textbox-fill div:nth-child(2) will also target div#firstDiv. div#thirdDiv will be .textbox-fill div:nth-of-type(3) or .textbox-fill div:nth-child(5) or .textbox-fill div:last-child or .textbox-fill div:last-of-type.
If you want to target specific .textbox-fill located on site, but with different parents, like:
div.something
div.textbox-fill
[...]
article#other
div.textbox-fill
You cannot target it using nth-child nor nth-of-type. You will need to find another way based on your site tree.