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孩子.

该.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.