Используем псевдокласс :not() на примере задачи «Выделение активной строки таблицы на чистом CSS» +3


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


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>




К сожалению, не доступен сервер mySQL