How can I paint orange the firsts articles of each .fila class?

November 16, 2022

I have this schematic:

<div class="fila">
    <div class="dos_tercios">
        <article>
            ......
        </article>
    </div>
    <div class="un_tercios">
        <article>
            ......
        </article>
    </div>
</div>

<div class="fila">
    <div class="un_tercios">
        <article>
            ......
        </article>
    </div>
    <div class="dos_tercios">
        <article>
            ......
        </article>
    </div>
</div>

And i want to paint with Orange the first article of each .fila class, or saying in other words, the left side articles (this is because after this i have to add diferent margint to right-hand articles and left-hand articles) (Watch image)

I have been trying this:

article:nth-child(odd){
    background-color: rgb(255, 177, 113);
}

>Solution :

You can try something like this,

.fila div:nth-child(1) article:nth-child(1) {
  background-color: rgb(255, 177, 113);
}

<div class="fila">
      <div class="dos_tercios">
        <article>
          ......
        </article>
      </div>
      <div class="un_tercios">
        <article>
          ......
        </article>
      </div>
    </div>

    <div class="fila">
      <div class="un_tercios">
        <article>
          1st ......
        </article>
         <article>
          2nd ......
        </article>
      </div>
      <div class="dos_tercios">
        <article>
          ......
        </article>
      </div>
    </div>

Moreover to target the odd and even children you can use something like this

article:nth-child(odd) , article:nth-child(even)

as you were trying to do the same in the question.