Question

[siiiido]

Hello Nicolas !!

about first-child

 <form class="reply" action="index.html" method="post">
    <div class="reply__column">
      <i class="far fa-plus-square fa-lg"></i>
    </div>
    <div class="reply__column">
      <input type="text" placeholder="Write a message...">
      <i class="far fa-smile-wink"></i>
      <button>
        <i class="fas fa-arrow-up"></i>
      </button>
    </div>
  </form>

In here i can apply ".reply .reply__coulmn:first-child "

BUT

  <main class="main-screen main-chat">
    <div class="chat__timestamp">
      Tuseday, June 30, 2020
    </div>
    <div class="message-row">
      <!-- <img src="https://images.unsplash.com/photo-1600373174847-aa05592023d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=941&q=80" alt=""> -->
      <div class="message-row__content">
        <span class="message__author">Nicolas</span>
        <div class="message__info">
          <span class="message__bubble">HI!</span>
          <span class="message__time">21:27</span>
        </div>
      </div>
    </div>
    <div class="message-row message-row--own">
      <div class="message-row__content">
        <div class="message__info">
          <span class="message__bubble">HI! nice to meet you!</span>
          <span class="message__time">21:27</span>
        </div>
      </div>
    </div>
  </main>

In here i can't choose ".main-screen .message-row:first-child", i don't know why
also if i wanna choose only first "message-row" how can i choose??
because i wanna apply first "message-row" second "message-row" separately!!
thank you for your help!

[serranoarevalo]

.message-row is not the first child.
There is .chat__timestamp before it.