Remove right and left border of selected box

Question

Remove right and left border of selected box with css without javascript is that possible ? min 2 boxes, max 5 or more boxes

for example;

I have 2 boxes. Only first box has right border. I want to do; whichever is selected or hover, border must disappeared. look my image example image

previous element can't be selected with CSS - following sibilings can be... — kukkuz, Feb 03 '17 at 11:13
I would suggest you to search for `CSS previous sibling selector`. There's no real way to do with CSS but there's some tricks out there that you may adapt to your own code. — user7393973, Feb 03 '17 at 11:13
Yes as a trick I currently use flex with order.. But I wondered if there could be a better way.. thanks — , Feb 03 '17 at 11:16

Banzay · Accepted Answer · 2017-02-03T12:01:52.077

0

You can play with borders of hover'ed boxes. Idea is when you hover on any box, you do:

Left border color set the same as the background color: border-left: 1px solid orange;
set negative left margin equal to border width, that makes box to shift left over previous element and hide previous border: margin-left: -1px;
To prevent all the next boxes a notable shift, you need to increase active box width to its width + border width: width: calc(20% + 1px);
If padding is set inside the box, you need to add border width to left padding value.

Here is a solution (suggest a border-right width = 1px):

.cont {
  width: 100%;
  height: 100px;
}
.box {
  width: 20%;
  height: 100px;
  float: left;
  background: orange;
  display: inline-block;
  box-sizing: border-box;
}
.box:not(:last-child) {
  border-right: 1px solid black;
}
.box:not(:first-child):hover {
  border-left: 1px solid orange;
  box-sizing: padding-box;
  margin-left: -1px;
  width: calc(20% + 1px);
}
.box:hover {
  background: lightblue;
  border-right: 1px solid lightblue;
}

<div class="cont">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
</div>

edited Feb 03 '17 at 12:01

answered Feb 03 '17 at 11:15

Banzay

9,310
2
27
46

Could you explain this? I don't get how this is related to the question. – user7393973 Feb 03 '17 at 11:20
Q requirement is: If any of boxes has hovered, right border of first one should desappear. right? – Banzay Feb 03 '17 at 11:25
Well, I guess it's up to the OP to check if that works. I'm just focused on the `CSS previous sibling selector`. :) – user7393973 Feb 03 '17 at 11:27
it is good but what if more boxes come? for example 5 box.. and 3. hover; should not borders left and right at 3. box – Feb 03 '17 at 11:30
I could not use CSS previous sibling selector :( – Feb 03 '17 at 11:31
So please, why don't you ask exactly what you need. – Banzay Feb 03 '17 at 11:33
1

@ceren - I think that if you really need to style it that way, you need to use `id`s or JavaScript. CSS doesn't has anything for going back, only forward. For example, styling a element's parent. Nope. – user7393973 Feb 03 '17 at 11:33
solution for any quantity of boxes is easy, but a little tricky. I'll change an answer in a moment. – Banzay Feb 03 '17 at 11:35
I've changed an answer. Have a look. – Banzay Feb 03 '17 at 11:52
thanks all :) @user7393973 – Feb 03 '17 at 11:59

Remove right and left border of selected box

1 Answers1