Menu
I have multiple items with same width inside a container. Because of different heights of the elements, there is problem with the alignment, you can see in image below.
I want to clear after every 3rd item without changing the html markup, so that the 4th item goes to the next row. I'm trying to add nth-child(3):after, but does not seem to work.
Here's the code:
HTML:
<div class="list"> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet</div> </div> CSS:
.item:nth-child(3):after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } Demo: http://jsfiddle.net/KPXyw/
343
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li. mybutton:nth-child(2)"). hide() .
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
Use the :not(selector) Selector Not to Select the First Child in CSS. We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS.
Actually it's
.item:nth-child(3n+1){ clear:left } 
.item:nth-child(3n+1){ clear:left } Updated Fiddle
26
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
