I have the following line of code

```
<div id="chat">
  <p class="chatrow_1">
    <span class="time">01:41:55</span>
    <span class="user-msg">
      <span class="c-avatar">
        <img src="http://i.imgur.com/ImgurID.png"/>
      </span>
      <span class="user">
        <strong>
          <span class="chat-username" data-user="1">Anonymous_001</span>
        </strong>
      </span>
      <span class="msg">
        <span class="chat-msg">Hello</span>
      </span>
    </span>
  </p>
</div>

```

I want to change the `#chat > p` background-color that contain `[data-user="1"]`
using pure CSS without jQuery because the chat is being updated with every new message. I already tried using Javascript/jQuery

I tried using something like that:

```
span[data-user="1"] < strong < .user < .user-msg < p < #chat

```

Unfortunately, it doesn't exist.

[chat like that](https://i.stack.imgur.com/XnM9S.png)