Как нацелиться на первого ребенка внутри элемента

Question

Я хочу нацелиться на первого дочернего элемента, вложенного в него, и элемента с помощью css

<div  class="message message-send">
  <div class="message-container">
    <div class="message-avatar">
      <div class="msg-avatar"></div>
      <div class="message-msg">
      <div class="msg-contentContainer">
        <div class="msg-text">
          <div class="msg-container">
            <p class="msg-msg msg-size">hello</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css: пробный

.message-send .msg-text> *:first-child {
  border-top-right-radius:.999em;
}

Я хочу нацелиться на '.msg-текст 'как первый потомок' .message-send 'я пробовал

, но не работал

Answer 1

div div > :first-child

это повлияет на прямого первого ребенка родителя (второго div)

div div :first-child

это повлияет на каждого первого ребенка детей

p{
margin:0;
background:green;
}
span{
display:block;
}
div{
  background:blue;
  padding:10px;
  color:#fff!important;
}
div div > :first-child{
  background:red;
  display:block;
  width:100px;
}

<div>
  <div>
    <span>
       1
      <p>2</p>
      <p>3</p>
    </span>
    <span>22</span>
  </div>
</div>