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.)
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).
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.
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.
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 div
s.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With