0

I have an HTML page that uses h-entries to store "conversations". I would like to style messages (h-entry) differently for each person in the conversation (i.e. like on iOS how one sender has blue messages and another has grey). In order to do so, I need to select the h-entry of a given "user". The user is defined in the <a> tag with their name. So I am trying to use CSS selectors as such, but I've had no luck: 

.h-entry[a[href="name_of_person"]]{
      background-color: #acbd
}

Note: I need to select the h-entry and NOT the specific <a> tag.

A typical h-entry looks like this:

<div class="h-entry">
   <time class="dt-published" datetime="yyyy-mm-dd:hh:mm:ss">yyyy-mm-dd hh:mm:ss</time> 
   <a href="identifier" class="p-author h-card">user_name</a> 
   <span class="e-content p-name">message content</span>
</div>

I'd like to select all h-entries who have a specific "identfier" value

isherwood
  • 46,000
  • 15
  • 100
  • 132
Swoldier
  • 145
  • 1
  • 16
  • 1
    Not possible with CSS alone, you'll have to change the HTML (by putting something on the parent div) or do it with JS. If the participants are arbitrary and not known in advance, doing it with JS is probably the better idea anyway (you don't want to hard-code separate colors for each possible person) – CertainPerformance Dec 17 '19 at 21:39
  • @isher: The question OP is asking is https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – CertainPerformance Dec 17 '19 at 21:42
  • Matching attributes is the easy part, selecting a parent which has a child is fundamentally impossible – CertainPerformance Dec 17 '19 at 21:45
  • 1
    @isherwood You have a gold badge, gold badgers can fix it themselves if they want (click on the Edit button next to the duplicate list and you can add/remove links as needed) – CertainPerformance Dec 17 '19 at 21:54

0 Answers0