Apply CSS styles to an element depending on its child elements - ONLY CSS

Question

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

score 0 · Accepted Answer · answered Dec 20 '16 at 07:55

You can't select a parent element from inside any of its descendants.

However you can make an item looks like selected. The trick is to add position: relative on outermost parent and use :before or :after pseudo element on the child element.

Here is the css code:

.chatrow_1 {
  position: relative;
}

[data-user="1"]:before {
  background: skyblue;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.chatrow_1 {
  position: relative;
}

[data-user="1"]:before {
  background: skyblue;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

<div id="chat">
  <p class="chatrow_1">
    <span class="time">
      01:41:55
    </span>
    <span class="user-msg">
      <span class="c-avatar">
        <img src="" alt="Image Description" />
      </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>
  <p class="chatrow_1">
    <span class="time">
      01:41:55
    </span>
    <span class="user-msg">
      <span class="c-avatar">
        <img src="" alt="Image Description" />
      </span>
      <span class="user">
        <strong>
          <span class="chat-username" data-user="2">
            Anonymous_001
          </span>
        </strong>
      </span>
      <span class="msg">
        <span class="chat-msg">Hello</span>
      </span>
    </span>
  </p>
</div>

oezi · Answer 2 · 2016-12-20T08:03:11.170

CSS doesn't currently have a "parent-selector".

The Selectors Level 4 Working Draft contains a :has() pseudo-class that would make this possible, but this isn't implemented by any browser yet (see Can I use and MDN Browser compatibility).

In Theory, it would work like this:

#chat > p:has(> [data-user="1"]){
  background-color: red;
}

In the meantime, your only options are:

using Javascript to implement this behaviour
set a class on the parent-Tag while creating the HTML-output
"fake" the style to look like you want it to be using pseudo elements one the [data-user="1"]

Apply CSS styles to an element depending on its child elements - ONLY CSS

2 Answers2