Как применить стиль только к первой строке (соответствующей классу) таблицы с использованием чистого css?

Question

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

Я пробую следующее, но это не работает.

.highlighted{ 
background-color: lightyellow; 
} 
table:first-child tr.highlighted td{ 
    border-top: solid 1px gray; 
} 

Вот скрипка.

http://jsfiddle.net/k2ky6/

Проблема у меня в том, что граница добавляется к каждой выделенной строке, а не только первым.

Возможно ли это с чистым css?

Answer 1

Вы можете сделать это следующим образом: с селектором .highlighted ~ .highlighted и с применением display:block к вашему <tr>. Here является обновленной jsFiddle

.highlighted { 
    display:block; 
    border-top:1px solid lightgrey; 
    background-color:lightyellow; 

} 
.highlighted ~ .highlighted { 
    border:0; 
} 

Что это делает это .highlighted относится и к первому, и .highlighted ~ .highlighted относится ко всему но первый

Answer 2

:first-child псевдо-селектор о быть первым дочерний элемент родительского элемента. Если ваши <TR> s - все дети одного общего <TABLE>, то tr:first-child применяется только к первой строке в таблице.

То, что вы на самом деле написал - table:first-child - относится к <TABLE> элементов, которые являются первыми детьми своего конкретного родителя (первый <TABLE> в <DIV>, например).

Вы могли бы получить что-то работает, поставив каждую группу выделенных ячеек в <TBODY>, если это возможно для вас - потому что тогда <TR> действительно будет первым ребенком этой <TBODY>.

Насколько я знаю, что вы действительно просили - сначала <TR> с определенным классом - вообще не возможно в чистом CSS, даже с новыми селекторами CSS3.

Answer 3

Есть ли преимущество/разница в этом .highlighted ~ .highlighted?

... в отличие от создания стиля для только первого выделен один такие как

.highlighted{ 
    background-color: lightyellow; 
} 
.highlighted-2 td{ 
    border-top: solid 1px gray; 
    background-color: lightyellow; 
}