CSS выбирает либо <thead>, либо <tbody> из <table>
У меня следующая проблема. У меня много таблиц, но все они имеют разную структуру: у одной тип <table><thead><tbody>, а у других только <table><tbody>.
И мне нужно применить css для thead (если он установлен в таблице) ИЛИ для tbody (он всегда установлен). Я не должен устанавливать стили для них обоих, только для первого, кто идет после тега <table>.
Итак, если у меня есть
<table>
<thead>...</thead>
<tbody>...<tbody>
</table>
то CSS следует применять только для объявления.
И наоборот, если у меня:
<table>
<tbody>...</tbody>
<table>
затем следует применить CSS для tbody.
Я бы хотел, чтобы было что-то вроде «если thead установлен, то...»
Ответы 1
Если это вариант, вы можете использовать хак с селектором :first-child.
Например, вы выберете любой из них, который является первым потомком <table>:
table > thead:first-child, table > tbody:first-child{
/* properties here */
}
В этом случае, если присутствует thead, tbody не будет первым потомком. В противном случае, если thead нет, tbody будет первым потомком.
Посмотрите в действии:
table > thead tr, /* Select the <tr> in a <thead> if present */
table > tbody:first-child tr:first-child /* Select the first <tr> in a <tbody> when the <thead> is not present */
{
font-weight: bold;
color: blue;
}
table{
margin-top:1em;
border: 1px solid black;
}<table>
<thead>
<tr><th>This is a table with header</th></tr>
</thead>
<tbody>
<tr><td>This is the body</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>This is a table without header</td></tr>
</tbody>
<tbody>
<tr><td>This is the body</td></tr>
</tbody>
</table>Просто надеюсь, что ни в одной таблице нет элементов <caption> или каких-либо элементов <colgroup>.
Спасибо большое! Вы решили мою проблему! Я пытался взломать :first-child, но мне кажется, что я использовал неправильный синтаксис или что-то в этом роде. Еще раз большое Вам спасибо!