How does CSS find a child element ? [duplicate] - html

Question

This question already has answers here:
:first-child not working as expected
(5 answers)
Closed 5 years ago.
Consider the following code:
<h2>
Working example
</h2>
<div class="test">
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - no DIVs
</h2>
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - Divs
</h2>
<div>
<button>FirstChild (Yellow)</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>LastChild (Red)</button>
</div>
</div>
And the following CSS:
.test button:first-child {
background: yellow;
}
.test button:last-child {
background: red;
}
.test button:not(:last-child):not(:first-child) {
background: cyan;
}
The result:
Why my CSS if not finding the child button element if it is inside a div or has another element (h2) in the middle ? There are no other button elements in the test div.
How to make this CSS consider the 3 given situations with the correct behaviour (Working example) ?
JSFiddle here

Answer 1

.test button:first-child this works on 1st one but failed on 2nd since first child of .test is h2 not button
SOLUTION:
Order matters in CSS so first set all button under .test to green, then set first/last to their color.
You should use first-of-type and last-of-type to target first of type (button or div) in siblings, or last in siblings, if you not sure about siblings, you should really read this:
Adjacent sibling selectors
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
.test button {
background: green;
}
.test > button:first-of-type,
.test div:first-of-type button {
background: yellow;
}
.test > button:last-of-type,
.test div:last-of-type button {
background: red;
}
<h2>
Working example
</h2>
<div class="test">
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - no DIVs
</h2>
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - Divs
</h2>
<div>
<button>FirstChild (Yellow)</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>LastChild (Red)</button>
</div>
</div>

Answer 2

Apparently you are mistaking what :last-child and the rest means and how it works. It is not the content of the button but the last element in a group of child elements. Your usage is incorrect.
You can try .test div:last-child button {color:red;} as an example.

Answer 3

Find the child element
.test button:first-child or .test button:nth-child(1)
.test button:nth-child(2)
.test button:nth-child(3)
.test button:last-child or .test button:nth-child(4)