on `hover` - how to handle the children `border-radius` on different scenario?

Question

I have a parent with children a elements. when user mouse over i am changing the child border color in to red. it works.

my problem is, the child length is not static. it is dynamic. I am adding the left-border radius both the first and last but how to add the right-radius to the second and last? ( since i don't know the count of the children)

.parent {
  border:5px solid red;
  display:inline-block;
  position: relative;
  border-radius:5px;
  box-sizing:border-box;
  margin-bottom:3em;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
  position: relative;
  width:50%;
  float:left;
  box-sizing:border-box;
}

.parent a:nth-child(odd):hover{
  border:5px solid #ddd;
  margin: -5px;
}

.parent a:nth-child(even):hover{
  border:5px solid #ddd;
  margin: -5px;
  left:10px;
}

.parent a:first-of-type{
  border-top-left-radius:5px;
}

.parent a:last-of-type{
  border-bottom-left-radius:5px;
}

<div class="parent">
      <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>
   </div>
   
   <div class="parent">
      <a href="#">1</a><a href="#">2</a><a href="#">3</a>
   </div>
   
      <div class="parent">
      <a href="#">1</a>
   </div>

or what is the correct way to handle this?

Answer 1

You can use the following and all of your cases should be sorted:

.parent {
  border:5px solid red;
  display:inline-block;
  position: relative;
  border-radius:5px;
  box-sizing:border-box;
  margin-bottom:3em;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
  position: relative;
  width:50%;
  float:left;
  box-sizing:border-box;
}

.parent a:nth-child(odd):hover{
  border:5px solid #ddd;
  margin: -5px;
}

.parent a:nth-child(even):hover{
  border:5px solid #ddd;
  margin: -5px;
  left:10px;
}

.parent a:first-of-type{
  border-top-left-radius:5px;
}

.parent a:nth-child(2) { /* second child */
  border-top-right-radius:5px;
}

.parent a:last-of-type:nth-child(even){
  border-bottom-right-radius:5px;
}

.parent a:last-of-type:nth-child(odd){
  border-bottom-left-radius:5px;
}

.parent a:nth-last-child(2):nth-child(odd) {
  border-bottom-left-radius: 5px;
}

Here is a jsfiddle: https://jsfiddle.net/67hr0oax/4

Here is an update with some of the jerkiness removed: https://jsfiddle.net/67hr0oax/7/

Please note: Browser support is for IE9 and above only.

Answer 2

As long as you keep the number of elements even by added <a>&nbsp;</a> this will work.

Though the outer border had some chinks in it to stop but they're there to stop the whole block jumping around when you mouse over.

.parent,
.parent a {
  position: relative
}
.parent {
  display: inline-block
}
.parent a {
  display: block;
  padding: 1em;
  width: 50%;
  float: left;
  box-sizing: border-box;
  border: 5px solid transparent;
  background: #fff
}
.parent a:nth-child(1) {
  border-top-left-radius: 5px;
  border-top: solid red 5px
}
.parent a:nth-child(2) {
  border-top-right-radius: 5px;
  border-top: solid red 5px
}
.parent a:nth-child(even) {
  border-right: solid red 5px
}
.parent a:nth-child(odd) {
  border-left: solid red 5px
}
.parent a:last-child {
  border-bottom-right-radius: 5px;
  border-bottom: solid red 5px
}
.parent a:nth-last-child(2) {
  border-bottom-left-radius: 5px;
  border-bottom: solid red 5px
}
.single a {
  border-radius: 5px;
  border: 5px solid red
}
.parent a:hover {
  border-color: #00f
}

<div class="parent">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a>&nbsp;</a>
</div>

<div class="parent">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a>&nbsp;</a>
</div>

<div class="single parent">
  <a href="#">1</a>
</div>