CODEWITHSUNDEEP
jqueryhtmlcsswordpress
user7928337
user7928337

Reputation:

Show borders only where elements are touching?

So right now I have this situation.

enter image description here

It's all fine now but there is a possibility of adding more Courses. The wrapper is flex type but borders are currently done with .div:nth-child(1) child 2, 3 and 4 because every element has different borders. So the problem is when new one is added I need to manually add css for it. It is not rly an issue because it will be very rare but it got me thinking is there a way to make the process automatically?

First has bottom and right, second has left and bottom, 3rd has top and right and 4th has left and top

Upvotes: 1

Views: 150

Answers (2)

Will
Will

Reputation: 4155

Here's one way to do it using nth-child selectors. Tests below for 4, 5, 6 and 7 items.

.courses {
  display: flex;
  flex-wrap: wrap;
}

.course {
  /* everything gets a border bottom */
  border-bottom: 2px solid #faca28;
  box-sizing: border-box;
  width: 50%;
}

/* left items get a right border */
.course:nth-child(odd) {
  border-right: 2px solid #faca28;
}

/* no border bottom on the last one */
.course:nth-last-of-type(1) {
  border-bottom: 0;
}

/* no border bottom on the second to last one IF it's odd.*/
.course:nth-last-of-type(2):nth-child(odd) {
  border-bottom: 0;
}


/* demo only */
.courses {
  color: #555;
  margin-bottom: 100px;
  font: 1.5rem sans-serif;
}
.course {
  text-align: center;
  padding: 50px;
}
<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

Upvotes: 1

P.S.
P.S.

Reputation: 16384

You can get this basic grid and adapt for your needs (it's just a basis). The basic idea is that this lines are not borders really, they are a part of colored div under white blocks. So in this way you don't need to apply borders, I think it's good solution if you have many blocks and don't want to apply borders to each of them.

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.outer {
  background-color: red;
  height: 412px;
}

.wrapper {
  width: 100%;
  height: 100px;
  display: inline-block;
  background-color: red;
}

.item {
  height: 100px;
  width: calc(50% - 3px);
  display: inline-block;
  background-color: white;
}

.item + .item {
  margin-left: 2px;
}
<div class="outer">
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>  
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>  
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Alternatively, you can just define 4 classes with different borders and apply them to your blocks.

Upvotes: 0

Related Questions