CSS: Last Element on Line

CSS: Last element on line

Interesting question! Here's what I consider a "low-tech" solution with jQuery that does the trick:

$(function() {
    var lastElement = false;
    $("ul > li").each(function() {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            lastElement.addClass("nobullet");
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
});​

The algorithm is not hard to follow, but here's the idea: iterate over the elements, taking advantage that they all have the same properties (size, margin, display inline etc) that affect their position when the browser computes layout. Compare the vertical offset of each item with that of the previous one; if they differ, the previous one must have been at the end of the line so mark it for special treatment. Finally, mark the very last item in the set for special treatment as well, since by definition it is the last item in the line on which it appears.

IMHO the fact that this is a Javascript-based solution (can it be done without, I wonder?) is no problem at all here, as even if the script does not run there is only going to be an extremely slight visual degradation of your webpage.

See it in action.

CSS last child of a row

You could apply nth-child for your first solution

.testbox:nth-child(3n) {
    background: blue;
}

An example: http://jsfiddle.net/uq9zaav3/3/

For the second solution you have to declare when and where you want to use a clear div so it could also be done with nth-child(..).

Last element on each row pushing next row first element far to the right on hover

margin creates space, you can use transform: translateY(-5px) instead.

Edit: the browser renders transforms without affecting layout

CSS: select last element at specified depth (two-level menubar)

Give :last-child condition to the div element. Because your last anchor is under the last div. Where > denotes the immediate child.

/* MENU */
div.menu {  display: inline;}div.menu a {  padding-left: 0.5em;  padding-right: 0.5em;  border-right: 1px solid lightgrey;  font-size: 12pt;}div.menu > div:last-child > a {  border-right: 0px;}/*DROP DOWN*/
.dropdown {  position: relative;  display: inline;}.dropdown_content {  display: none;  z-index: 1;  position: absolute;  top: 1em;  right: 0;  background-color: #f9f9f9;  white-space: nowrap;  border-bottom: 1px solid lightgrey;}.dropdown_content a {  padding: 0.2em;  text-decoration: none;  display: block;}.dropdown:hover .dropdown_content {  display: block;}

<div class="menu">  <a href="">Item1</a>  <a href="">Item2</a>  <div class="dropdown">    <a class="dropbtn">Item3</a>    <div class="dropdown_content">      <a href="">Subitem1</a>      <a href="">Subitem2</a>    </div>  </div></div>

Move last element to next line in a flex container

Apply flex-wrap to the container.

Apply flex: 1 0 33% to the first three child divs.

To the fourth div apply flex-basis: 100%; display: flex.

To the children of the fourth div apply flex: 1 0 33%.

The idea is to force the fourth item to wrap, then have its children replicate the behavior of the children in the primary container.

---

Related Topics