How to target first child in within an element

Question

I want to target the first child of an element which is nested within and element with 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: tried

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

I want to target '.msg-text' as the first child of '.message-send' i tried

but did not work

There is no `.msg-text` within `.message-send` in your Angular template — lumio, Apr 08 '19 at 14:28
Possible duplicate of [Is there a CSS selector for the first direct child only?](https://stackoverflow.com/questions/2094508/is-there-a-css-selector-for-the-first-direct-child-only) — Daut, Apr 08 '19 at 14:39
If your question really is, "target the first .msg-text in .message-send", then you should ask that. With your current code, `:first-child` doesn't help, since nearly all the elements are a first child of their parents. — Mr Lister, Apr 08 '19 at 14:49
Looks like there is only one `.msg-text` element on the page, why not just target it directly? If your use case has more than one, please include how it would be used. Right now, `.msg-text` is not a direct child of `.message-send`, so the `:first-child` selector will probably not work the way you want. — Joe Lissner, Apr 08 '19 at 15:03

score 0 · Answer 1 · answered Apr 08 '19 at 14:51

div div > :first-child

this will affects the direct first-child of parent (second div)

div div :first-child

this will affects each firs-child of children

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>

How to target first child in within an element

1 Answers1