Я не могу понять, как работает селектор?

-1

Я не понимаю, как использовать два псевдокласса. Я хочу изменить черный фон на строку с ячейками 3,3,3.Я не могу понять, как работает селектор?

tbody tr:not(:empty):first-of-type td { 
 
    background: black; 
 
}

<table> 
 
    <tr> 
 
    </tr> 
 

 
    <tr> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>2</td> 
 
    <td>2</td> 
 
    <td>2</td> 
 
    <td>2</td> 
 
    <td>2</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>3</td> 
 
    <td>3</td> 
 
    <td>3</td> 
 
    <td>3</td> 
 
    <td>3</td> 
 
    </tr> 
 

 
    <tr> 
 
    </tr> 
 
</table>

Почему фон не применяется?

источник

2016-09-02 Vladimir

Im запутался, что вы хотите. Если его строка вы хотите, почему бы не просто «tr: nth-child (4) td'. – Ruddy

Нет чистого решения CSS для получения последнего непустого ребенка. Вы можете использовать javascript для этого. – MadMarc

* строка с ячейками 3,3,3 * На основании каких критериев? Четвертая строка сверху? Второй ряд снизу? Третья непустая строка сверху? Первая непустая строка снизу? Что-то другое? –

Клетки "3" находятся в от последнего до последнего ряда. Для того, чтобы выбрать, что предпоследний строки, вы должны использовать :nth-last-child() как в:

edit2: <nope tbody is created as an anonymous element by browsers so you can select TBODY что-то without any tbody in a table> Как заявил @Esko в комментарии к вашему вопросу, вы не имеете tbody элемент в вашем HTML код. Затем вы должны удалить его из селектора. tr можно найти только в таблице, поэтому нет необходимости добавлять table слева от вашего селектора (но вы можете). </nope>

Примечание 1: ни один из ваших tr не является пустым: они содержат пробелы и, следовательно, непусты. <tr></tr> и <tr></tr>: как пустые <tr> </tr>: НЕ пусто

Примечание 2: :first-of-type бы, в коде выбора самого первого tr, который является один с не td внутри (если бы тд детей, он бы до сих пор быть первым в своем роде)

tr:nth-last-child(2) td { 
 
\t \t \t background:black; 
 
\t \t }

<table> 
 
<tr> 
 
\t 
 
</tr> 
 
\t <tr> 
 
\t \t <td>1</td> 
 
\t \t <td>1</td> 
 
\t \t <td>1</td> 
 
\t \t <td>1</td> 
 
\t \t <td>1</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>2</td> 
 
\t \t <td>2</td> 
 
\t \t <td>2</td> 
 
\t \t <td>2</td> 
 
\t \t <td>2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3</td> 
 
\t \t <td>3</td> 
 
\t \t <td>3</td> 
 
\t \t <td>3</td> 
 
\t \t <td>3</td> 
 
\t </tr> 
 
\t <tr> 
 
\t </tr> 
 
</table>

источник

2016-09-02 08:33:55 FelipeAls

Номер tr unknown – Vladimir

Что вы хотите выбрать тогда? Добавьте другой вариант использования, где то, что вы хотите выбрать, - это не вторая и последняя строка или четвертая строка, чтобы мы могли понять. Пусть у него есть другое tr с td после этой четвертой строки или пустых или прямо посередине или пустое и непустое нигде в любом количестве, и я не имею ни малейшего представления о том, что вы хотите выбрать в этом случае:/ – FelipeAls

На самом деле у него ** есть элемент 'tbody'. Это не в HTML, но будет добавлено браузером. Он хочет включить его в селектор, это еще один вопрос. –

Я не могу понять, как работает селектор?

ответ

Смежные вопросы