スタイルは、tdsのない別のテーブル

Question

の隣にテーブルとdivがあるという条件に基づいています。

上記の表にtdsがないという条件に基づいてdivを強調したかったのです。

私はこれを実行しようとしました：

table tbody td:empty + div { 
    background-color: red; 
} 

以上が動作していません。誰もが純粋なCSSのソリューションを提案できますか？

Answer 1

<div>が<td>の兄弟ではないため、CSSセレクタの+は機能しません。一方、同じ階層レベルにあるため、table + div { something: something }が機能します。

残念ながら、AFAIKは、子が親（親の兄弟）に影響を及ぼすCSSルールを作る方法がありません。

基本的には、HTMLは何らかの方法で再構成する必要があります。たとえば、小さなクラスのJSコードを書くと、<td>がない場合にクラスをテーブルに追加して、このクラスをCSSルールで使用することができます。

Answer 2

ありはこれに純粋なCSSのソリューションですが、あなたはあなたの「指標」divとして再目的そしてそれ以外の場合は未使用tfootをあなたのテーブルthead、tbodyとtfootを与える必要があります：

提案のため

table { 
 
display: inline-block; 
 
width: 150px; 
 
margin-right: 148px; 
 
height: calc(100% - 80px); 
 
vertical-align:top; 
 
} 
 

 
thead, tbody, tr, th, td { 
 
border: 1px solid rgb(191,191,191); 
 
} 
 

 
tfoot { 
 
height: 80px; 
 
} 
 

 
tfoot td { 
 
text-align: center; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,0,0); 
 
transform: translateX(152px); 
 
padding: 2px; 
 
border: 2px solid rgb(127,0,0); 
 
} 
 

 
tbody + tfoot td { 
 
background-color: rgb(0,127,0); 
 
border: 2px solid rgb(0,63,0); 
 
transform: translate(152px, -100%); 
 
}

<table> 
 
<thead> <tr><th>Name</th><th>Age</th></tr></thead> 
 
<tfoot><tr><td>Table has no tbody</td></tr></tfoot> 
 
</table> 
 

 
<table> 
 
<thead> <tr><th>Name</th><th>Age</th></tr></thead> 
 
<tbody> 
 
<tr><td>Alice</td><td>01</td></tr> 
 
<tr><td>Bob</td><td>10</td></tr> 
 
<tr><td>Chuck</td><td>11</td></tr> 
 
<tr><td>Dan</td><td>100</td></tr> 
 
<tr><td>Eve</td><td>101</td></tr> 
 
</tbody> 
 
<tfoot><tr><td>Table has a tbody</td></tr></tfoot> 
 
</table>

Answer 3

感謝。しかし、私はangleのng-classを使って、テーブルを埋める配列の長さをチェックし、条件に基づいてdivのスタイルを変更しました。私は：空の擬似クラスは、単純なCSSのみのソリューションを提供するだろうと思った。

<table> 
    <tbody> 
    <tr> 
    <th> 
     Name 
    </th> 
    <th> 
     Age 
    </th> 
    </tr> 
    <tr ng-repeat="person in people"> 
    <td>{{person.name}}</td> 
    <td>{{person.age}}</td> 
    </tr> 
    </tbody> 
<table> 

<div ng-class="people.length < 1 ? 'highlight-div':''"> 
    Table has no tds 
</div> 

---

.highlight-div { 
    background: red; 
    }