Можно ли стилизовать группы элементов, которые имеют одинаковое значение атрибута вместе?

Question

HTML-код для моего приложения выглядит примерно так:

<div class="chat">
  <div class="message" data-author="Alice">
    <div class="content">Hello Bob!<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">How are you today?<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">I am doing great myself!<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Bob">
    <div class="content">Hey Alice!<div>
    <div class="author">Bob</div>
  </div>

  <div class="message" data-author="Bob">
    <div class="content">Nice hearing from you :-)<div>
    <div class="author">Bob</div>
  </div>
</div>

Я хотел бы создать некоторый стиль, который работает с группой всех сообщений, имеющих одного автора,например, скрытие дочернего элемента .author за исключением последнего дочернего элемента.

Есть ли способ сделать это с помощью селекторов атрибутов CSS или других функций CSS?(Возможно ли сделать это без изменения HTML)?

Answer 1

Если вам известно имя автора, на которого вы хотите настроить таргетинг, вы можете сделать это:

.message[data-author="Bob"]{
   color:red;
}
.message[data-author="Alice"]{
   color:green;
}

<div class="chat">
  <div class="message" data-author="Alice">
    <div class="content">Hello Bob!<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">How are you today?<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">I am doing great myself!<div>
    <div class="author">Alice</div>
  </div>


  <div class="message" data-author="Bob">
    <div class="content">Hey Alice!<div>
    <div class="author">Bob</div>
  </div>


  <div class="message" data-author="Bob">
    <div class="content">Nice hearing from you :-)<div>
    <div class="author">Bob</div>
  </div>
</div>