Menu
I want to apply some CSS to the last blog-post. The problem is that the last element in the div 'blog-posts' is the same type of element as the 'blog-post' divs.
I've tried:
HTML:
<div class="blog-posts">
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="f03-456245"></div>
</div>
CSS:
.blog-post:last-child{
//do some css
}
249
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).
:first-child means "select this element if it is the first child of its parent". :last-child means "select this element if it is the last child of its parent". Only element nodes (HTML tags) are affected, these pseudo-classes ignore text nodes.
The first <div/> element with class milestone can be selected with the :first-of-type selector and the last <div/> element with class milestone can be selected with the :last-of-type selector. We use the above two selectors to round off the borders of the first and last milestones.
Both selectors work in the same way but have a slight difference i.e the last type is less specified than the last-child selector. Example: This example implements the :last-child selector. Output: After compiling the SASS source code you will get this CSS code.
Last element using .class is not possible. In your case you can use nth-last-child property.
.blog-posts div:nth-last-child(2) {
background: #ff0000;
}
DEMO
160
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
