We study the principle of the pseudo-class: not () using the example of the task “Highlighting the active row of a table in pure CSS”

A few days ago, my friend asked me to help with the solution of the problem that was at his interview. The interviewer gave him the following code snippet:

tbody:hover tr {
  opacity: 0.24;
}

Also added: “Now, when you hover over the table, all rows become faded. And you need to make sure that the line you pointed at remains active. ”

Decision

In the current solution, when you hover over the tbody: hover element, all tr ​​elements immediately change their opacity to 0.24.

tbody:hover tr {
  opacity: 0.24;
}

I need to change the selector so that the opacity is applied to all tr ​​elements except the one pointed at.

For such an implementation, you will need to use the hover and not pseudo-classes. With the help of hover, the browser will determine that the line was pointed, and with the help of not it will understand that no styles should be applied to it.

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

Homework

To consolidate, I prepared a homework task in which it is necessary to correct an error when displaying an image in text. I prepared the following markup and styles:

Some text
Some text

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

The error is that if the image is the first element, it still has a margin on top, but you need to make sure that it does not exist.

Some text
Some text

Accordingly, if the image is the last element, then you need to remove the indent from the bottom.

Some text
Some text