仅当类第一次或最后一次出现时才应用 CSS

Question

I have an HTML table with many rows

 ________________________
|_1______________________|
|_2______________________|
|_3______________________|
|_4______________________|
|_5______________________|

These rows are expandable, and a user might expand multiple of them

 ________________________
|_1______________________|
| 2                      |
| border-top             |
| border-bottom          |
|________________________|
|_3______________________|
| 4 ...                  |

I need to highlight with border-top and border-bottom the expanded rows.

However, if two adjacent rows are expanded, the border-bottom of the above one merges with the border-top of the below one.
Having a border of 1px results 1px + 1px , which I don't want.

Is this situation avoidable using CSS selectors?

Answer 1

If I well understood: if 2 adjacents rows are open, the second row should hides its top-border to avoid a double border ?

You can perform this with the sibling operator + .

.row-expanded + .row-expanded {
  border-top: none;
}