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