CSS Issue with (ODD) selector - css

Question

I'm trying to create a loop where I apply different styling to each odd element.
For this reason, using :nth-child(odd) would be great.
However, for some reason that I don't understand, :nth-child(odd) gets applied to each element, not just the odd ones.
I created a codepen to showcase the issue.
h3.post-title a:nth-child(odd) {
font-weight: bold;
}
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
https://codepen.io/Pbalazs89/pen/eYjZNya
I tried selecting the elements directly (h3.post-title a:nth-child(odd) {}) and I tried selecting their parent container as well (.ts-grid-item-2 h3.post-title a:nth-child(odd) {}) The parent container is not present in the container, I just wanted to list what I tried.

Answer 1

With your actual selector you target every a inside you h3 title.
You have to target every a in the odd element container.
div.item:nth-child(odd) h3.post-title a {}
With this selector you target an a element inside an h3 with class .post-title inside any odd div with class .item
div.item:nth-child(odd) h3.post-title a {
font-weight: bold;
color:red;
}
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>