Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.)

like image 774
KingKongFrog Avatar asked Jul 19 '13 19:07

KingKongFrog


People also ask

How do you choose the last element?

The :last selector selects the last element. Note: This selector can only select one single element. Use the :last-child selector to select more than one element (one for each parent). This is mostly used together with another selector to select the last element in a group (like in the example above).

How do you select the last line in CSS?

The text-align-last property in CSS is used to set the last line of the paragraph just before the line break. The line break may be due to the natural ending of a paragraph, or it may be due to the use of <br> tag.

Which selector will only target the last list item?

The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.


2 Answers

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.

like image 143
Jnatalzia Avatar answered Sep 19 '22 12:09

Jnatalzia


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;
}
like image 20
cimmanon Avatar answered Sep 19 '22 12:09

cimmanon