How do I select the h2 element in the 2nd box? [duplicate] - html

Question

This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 3 years ago.
I am using bootstrap grid structure. I coded a block containing 3 boxes with css. But I cannot select the 2nd and 3rd h2 elements.
<!-- 1st BOX-->
<div class="col-lg-6">
<div class="kutu">
<h2>1st TITLE</h2>
<div class="items">
</div>
<h3>test</h3>
</div>
test
</div>
<!-- 1st BOX END-->
<!-- 2st BOX-->
<div class="col-lg-6">
<div class="kutu">
<h2>2nd TITLE</h2>
<div class="items">
</div>
<h3>test</h3>
</div>
test
</div>
<!-- 2st BOX END-->
<!-- 3st BOX-->
<div class="col-lg-6">
<div class="kutu">
<h2>3rd TITLE</h2>
<div class="items">
</div>
<h3>test</h3>
</div>
test
</div>
<!-- 3st BOX END-->
I tried these methods, but I am not successful. I used nth-child and nth-of-type, but my desired result was not. How can I do that? Thank you
.kutu {
width: 600px;
height: 300px;
overflow: hidden;
}
.kutu:nth-of-type(2) h2{
color: red;
}
.kutu:nth-of-type(3) h2{
color: green;
}

Answer 1

Problem is the class is inside of the elements that are siblings
.kutu {
width: 600px;
height: 300px;
overflow: hidden;
}
.kutu:nth-of-type(2) h2{
color: red;
}
.kutu:nth-of-type(3) h2{
color: green;
}
<!-- 1st BOX-->
<div class="col-lg-6 kutu">
<div class="">
<h2>1st TITLE</h2>
<div class="items">
</div>
<h3>test</h3>
</div>
test
</div>
<!-- 1st BOX END-->
<!-- 2st BOX-->
<div class="col-lg-6 kutu">
<div class="">
<h2>2nd TITLE</h2>
<div class="items">
</div>
<h3>test</h3>
</div>
test
</div>
<!-- 2st BOX END-->
<!-- 3st BOX-->
<div class="col-lg-6 kutu">
<div class="">
<h2>3rd TITLE</h2>
<div class="items">
</div>
<h3>test</h3>
</div>
test
</div>
<!-- 3st BOX END-->
I tried these methods, but I am not successful. I used nth-child and nth-of-type, but my desired result was not. How can I do that? Thank you