first-child

[Destrifer]

Нужно применить оформление только к первому tr входящему в таблицу:

table tr:first-child {
    border-bottom: 1px solid red;
}

Причем в этой таблице находятся другие таблицы и каждый tr внутри каждой из них получает это свойство. А мне нужно только для первого tr входящего в основную таблицу. Все остальные таблицы - вложенные.

Казалось бы... решение проблемы на поверхности:

table > tr:first-child {
	border-bottom: 1px solid red;
}

Но нет. Так стиль вообще не появляется. Интересно почему. Tr является дочерним для table и я не вижу проблемы.

Тоже рекомендуют ребята с оверфлоу, но че-то как-то не работает.

 

 

[Switch74]

http://jsfiddle.net/dhf5g49p/

[Destrifer]

http://prntscr.com/m5gvq7

http://prntscr.com/m5gx1o

[Switch74]

http://jsfiddle.net/dhf5g49p/1/

[AlexZaw]

Маленько подкорректированный вариант Switch74:

<table border=1>
  <tr>
    <td>item1</td>
    <td>item2</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>item1</td>
          <td>item2</td>
        </tr>
      </table>
    </td>
    <td>item2</td>
  </tr>
</table>

table{
 border-spacing:0;
}
table,tr
{
  border:1px solid transparent;
}
td{
  padding: 0;
}
tr:first-child{
  border-bottom: 1px solid #f00;
}

 

[Destrifer]

Теперь все ок, спасибо

[SelenIT]

  On 1/10/2019 at 2:41 AM, Destrifer said:

Tr является дочерним для table

Expand  

Это только так кажется;) Никогда не доверяйте разметке, всегда смотрите, что показывает DOM-инспектор.