Ashish Ashish - 1 month ago 8
CSS Question

first-child selection does not working

WHen I am trying to select img of first article by callig css :first-child property, it is not selecting. I have used .widget_ci-latest-posts article:first-child but it is not selecting.

<aside class="widget_ci_latest-posts">
<h2>test</h2>
<article class="item">
<figure class="item-thumb">
<a><img class="x" src="" /></a>
</figure>
</article>

<article class="item">
<figure class="item-thumb">
<a><img class="x" src="" /></a>
</figure>
</article>

<article class="item">
<figure class="item-thumb">
<a><img class="x" src="" /></a>
</figure>
</article>
</aside>

Answer

To select first article you should use first-of-type() instead of first-child because first-child is h2 element not article.

.widget_ci_latest-posts article:first-of-type img  {
  border: 5px solid black;
}
<aside class="widget_ci_latest-posts">
  <h2>test</h2>
  <article class="item">
    <figure class="item-thumb">
      <a><img class="x" src="lorem" /></a>
    </figure>
  </article>

  <article class="item">
    <figure class="item-thumb">
      <a><img class="x" src="lorem" /></a>
    </figure>
  </article>

  <article class="item">
    <figure class="item-thumb">
      <a><img class="x" src="lorem" /></a>
    </figure>
  </article>
</aside>