Выделение активной строки таблицы на чистом CSS

Несколько дней назад мой друг попросил помочь с решением задачи, которая была на его собеседовании. Интервьюер дал ему следующий фрагмент кода:

tbody:hover tr {
  opacity: 0.24;
}

Также добавил: “Сейчас, при наведении на таблицу, все строки становятся блеклыми. А требуется сделать так, чтобы строка, на которую навели, оставалась активной”.

Решение

В текущем решении при наведении на элемент tbody:hover сразу все элементы tr меняют свою непрозрачность на 0.24.

tbody:hover tr {
  opacity: 0.24;
}

Мне же нужно изменить селектор так, чтобы непрозрачность применялась ко всем элементам tr кроме того, на который навели.

Для такой реализации потребуется использовать псевдоклассы hover и not. С помощью hover браузер определит, что на строку навели, а при помощи not он поймет, что к ней не надо применять стили.

tbody:hover tr:not(:hover) {
  opacity: 0.24;
}

Домашняя задача

Для закрепления я подготовил домашнюю задачу, в которой требуется исправить ошибку при выводе изображения в тексте. Я подготовил следующую разметку и стили:

<main class="content">
  <p>Some text</p>
  <img src="picture.jpg" alt="some alt">
  <p>Some text</p>
</main>

.content img {
  margin-top: 35px;
  margin-bottom: 35px;
}

Ошибка заключается в том, что если изображение будет первым элементом, у него по прежнему остается отступ сверху, а нужно сделать так, чтобы его не было.

<main class="content">
  <img src="picture.jpg" alt="some alt">
  <p>Some text</p>
  <p>Some text</p>
</main>

Соответственно, если изображение является последнем элементом, то требуется убрать отступ снизу.

<main class="content">
  <p>Some text</p>
  <p>Some text</p>
  <img src="picture.jpg" alt="some alt">
</main>