Стиль CSS, если не дети

Question

Мне нужно применить стиль к элементу, если определенный класс НЕ является потомком элемента.

<table class="printlist" style="width:100%">
  <tbody>
    <tr class="list_wanted0"><td>Whatever...</td></tr>
    <tr class="list_wanted1"><td>
      <div class="journal">
        <table><tbody>
          <tr><td style="width: 9em">2011-03-12 09:36</td></tr>
        </tbody></table>
      </div>
    </td></tr>
  </tbody>
</table>

Приведенный выше пример сведен к минимуму для демонстрации структуры.

Я хочу, чтобы свойства :Hover применялись только к .printlist tr, если <tr> имеет NO .journal child.

.list_wanted0 и .list_wanted1 нельзя использовать для выбора .journal, это могут быть другие имена классов.

CSS, который я пробовал:

.printlist tr:Hover * :not(itemjournal) {
  color: #000;
  background: #aaa
}

Очевидно, это не работает, как я намеревался.

Если вам нужна дополнительная информация, не стесняйтесь спрашивать,
Спасибо.

Answer 1

Это невозможно только с помощью CSS-селекторов; Вы не можете использовать CSS, чтобы определить, есть ли у элемента определенный тип дочернего элемента или нет. Лучше всего использовать JavaScript для применения классов и соответствующим образом оформлять их.

Пример использования селектора jQuery * :has() :

$('.printlist tr').not(':has(.journal)').addClass('nojournal');

Затем примените стили к .printlist tr.nojournal:hover.

Answer 2

Да, к сожалению, вам нужно использовать решение на основе javascript, такое как jQuery, предложенное BoltClock, особенно если вы хотите, чтобы стилизация CSS была согласованной во всех браузерах, учитывая тот факт, что не все браузеры реализуют полный стандарт CSSтехнические характеристики.

Если вы все еще хотите продолжить работу только с CSS, попробуйте найти таблицу шпаргалок о том, какие типы селекторов CSS поддерживаются в каких браузерах / версиях.

Answer 3

Я получил его на работу

Я думал, что отвечу на свой вопрос и представлю свое чистое решение CSS.

Решением было создать два класса и объединить их в <tr>

<table class="printlist" style="width:100%">
  <tbody>
    <tr class="list_wanted0 list_hover"><td>Whatever...</td></tr>
    <tr class="list_wanted1"><td>
      <div class="journal">
        <table><tbody>
          <tr><td style="width: 9em">2011-03-12 09:36</td></tr>
        </tbody></table>
      </div>
    </td></tr>
  </tbody>
</table>

Мне нужно было только добавить класс при наведении:

.list_hover:Hover {
  color: #000;
  background: #aaa
}

На всех <tr> строках, которые нуждаются в наведении, я комбинирую любой класс, который мне нравится, с классом .list_hover и исключаю его из строки .journal.

Теперь это работает точно так, как задумано. Спасибо за помощь.