We use the pseudo-class: not () on the example of the task “Selecting the active row of a table in pure CSS”

A few days ago, my friend asked for help with solving the problem that was in his interview. The interviewer gave him the following code snippet:

tbody:hover tr { opacity: 0.24; } 

Also added: “Now, when you hover over a table, all the rows become faded. And it is required to make so that the line on which they directed, remained active ”.

Decision

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

 tbody:hover tr { opacity: 0.24; } 

I also need to change the selector so that the opacity is applied to all the tr elements besides the one they are pointing 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 what was put on the line, and with the help of not it will understand that it is not necessary to apply styles to it.

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

Home task

To fix, I prepared a home task in which I need to correct the error when displaying an image in the text. I prepared the following markup and styles:

 <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; } 

The mistake is that if the image is the first element, it still has an indent from the top, but you need to make sure that it does not exist.

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

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

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