CODEWITHSUNDEEP
csscss-selectors
KingKongFrog
KingKongFrog

Reputation: 14429

In CSS, is it possible to select the last element before a wrap?

For example,

I have a bunch of div's side by side, and each div has a border-right:1px

The parent element is a certain width so at a certain point, the extra div wraps to the next line.

In essence, I do NOT want a border-right for the last div before the wrap.

If this doesn't make sense, I can create a fiddle. I just want to know can I target that last div before the wrap. (last-child will target the last div that is on the next line which isn't want.)

Upvotes: 24

Views: 7727

Answers (2)

Jnatalzia
Jnatalzia

Reputation: 1687

Figure out how many columns you're getting with the current width, either hardcoded or with JS and then use the nth-child selector.

For example if you have 3 columns per row with each div having a class of col it would be

div.col:nth-child(3n){border-right:none;}

The nth-child selector can be modified depending on however many columns are in each row of divs.

Upvotes: 5

cimmanon
cimmanon

Reputation: 68339

There is no way to select the last item from multiple lines, only the :last-child.

If your elements line up in columns, the multi-column module may be of interest to you. It has a column-rule property that's similar to borders, but only appears vertically between columns, never on the outer edges.

http://cssdeck.com/labs/febtiiet

.container {
  columns: 20em;
  column-rule: 1px solid;
}

Prefixes may be required: http://caniuse.com/#feat=multicolumn

Otherwise, you will need to switch to placing the border on the left as MrLister suggests:

http://cssdeck.com/labs/f8qjngd4

.container {
  overflow: hidden;
  padding: 0;
  border-style: none;
}

.child {
  border-left: 1px solid;
  position: relative;
  left: -1px;
  display: inline-block;
  width: 20em;
}

Upvotes: 3

Related Questions