How to Have a Border-Bottom on All Except The Last Item

How do I have a border-bottom on all except the last item

Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }

Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:

:first-child

li { border-top: 1px solid red; }
li:first-child { border-top: none; }

:last-child

li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }

+ selector

li+li { border-top: 1px solid red; }

The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.

EDIT:
The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)

Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/

Applying border-right to all elements except the last one

Use the :last-child pseudo-class to set border-right: none; on the last <a> in your .primary-navigation.

.primary-navigation a {
    margin-top: 16px;
    margin-bottom: 12px;
    padding-left: 23px;
    padding-right: 23px;
    border-right: 1px dotted #7b7f82;
    position: relative;
    line-height: 1;
}

.primary-navigation li:last-child a {
    border-right: none;
}

More on the :last-child pseudo-class on MDN.

CSS: how do I have a border-bottom on table rows, except for the last row

You have two options: (1) adding a specialized class in the HTML to the last row; or (2) using the :last-child pseudo class in your CSS.

Option 1: Specialized Class

If you can apply classes to your HTML, you can add a specialized class to the final row. If your markup is being generated by a server-side script (eg. a PHP script), you will need to edit that script to add similar markup.

HTML:

<table>
   <tr>
      <td>
      </td>
   </tr>
   <tr>
      <td>
      </td>
   </tr>
   <tr class="last">
      <td>
      </td>
   </tr>
</table>

CSS:

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr.last
{
   border-bottom: none;
}

Option 2: CSS Pseudo Class

The alternative is to use the :last-child CSS pseudo class. Using the :last-child class doesn't require any changes to the HTML and so may be a better choice if you aren't able to change the HTML. The CSS is almost identical to the above:

CSS:

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr:last-child
{
   border-bottom: none;
}

The drawback of this approach is that versions of Internet Explorer before 9 don't support the :last-child pseudo class.

How to remove border from elements in the last row?

You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.

.qa {  border-bottom: 1px solid #ccc;  margin-bottom:-1px;  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/    /*irrelevant styles*/  padding: 5px;  margin-left:5px;  margin-right:5px;  box-sizing: border-box;  flex:1 1 40%;}
.wrapper {  display: flex;  flex-wrap: wrap;  flex-direction: row;  overflow:hidden;}

<div class="wrapper">  <div class="qa">    <div>Question</div>    <div>Answer<br>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer<br>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer</div>  </div>  <div class="qa">    <div>Question</div>    <div>Answer<br>Answer</div>  </div></div>

How to put border bottom only on last-child of dropdown menu

apply this code

.sub-menu .sub-menu li:last-child{
 border-bottom: 12px solid red;
}

and remove this code

.menu-new li .sub-menu li ul li:last-child, .menu-new li .sub-menu li:last-child{
 border-bottom: 12px solid black;
}

update

see if this works for you

ul  ul > li:not(.menu-item-has-children) :last-child{
   border-bottom: 12px solid red;
}

Remove last border-bottom?

You can also set the top border instead and use the sibling selector to handle this without the need for an extra class:

.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
    }

.test li + li { border-top: 1px solid black;  }

Is there a way to dynamically set border bottom to the last element, and sometimes the last two elements?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  margin: 2em;
  bordr: 1px solid black;
}

.item{
  border-bottom: 1px solid black;
}

.item:last-child,
.item:nth-last-child(2):nth-child(odd){
  border-bottom: none;
  color: red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS not last child - cannot remove border of last grouping

Without seeing the code that you tried, it's hard to see what is going wrong. I suspect you tried not last child but when there are other items following this list (of another tagName), that won't work. use :last-of-type instead.

Following your edit: first of all you forgot a colon before last-child. Second, you are selecting the last .price-list child, but in your HTML there is only one such item per dl. You are probably trying to select all but the last dl items, rather than .price-list.

dl:not(:last-of-type) {  border-bottom: 1px solid red;}

<dl>  <div class="price-list">    <dt>Tuition</dt>    <dd>$10</dd>  </div></dl>
<dl>  <div class="price-list">    <dt>Tuition</dt>    <dd>$10</dd>  </div></dl><dl>  <div class="price-list">    <dt>Tuition</dt>    <dd>$10</dd>  </div></dl>
<dl>  <div class="price-list">    <dt>Tuition</dt>    <dd>$10</dd>  </div></dl><dl>  <div class="price-list">    <dt>Tuition</dt>    <dd>$10</dd>  </div></dl>
<dl>  <div class="price-list">    <dt>Tuition</dt>    <dd>$10</dd>  </div></dl>

---

Related Topics