css - :nth-last-child(-n+3) doesn't work with article element? -
Hello friends,
As the title, I was wondering why : nth -Little-child (-n + 3) {}
My document is not working for article element inside markup? According to the observations, should work like the following example:
When I want to select the last 3 items in a line before markup inside my layout, it does not work for me.
. Post-Entry: nth-last-child (n + 3) {display: none; }
The above code selects all line items, not the last 3
HTML:
& lt; Article class = "grid_4 post-entry" & gt; & Lt; A href = "#" headline = "" & gt; & Lt; Data class = "post-thumb" & gt; & Lt; Img src = "../ images / placeholders" alt = "placeholder" & gt; & Lt; Figcaption & gt; & Lt; Img src = "../ images / cross.png" alt = "cross x" & gt; & Lt; / Figcaption & gt; & Lt ;! - End figcaption.post-thumb - & gt; & Lt; / Statistic & gt; & Lt ;! - Last picture post-thumb - & gt; & Lt; / A & gt; & Lt; / Article & gt; & Lt ;! - End article.grid_4 Post-Entry - & gt;
JSFiddle:
Hope you can help me thanks!
Your code is OK You are missing -
in bus Your selector
But is it still not working?
The last two elements div.clear
and footer.grid_12
from your parent div.container12
Because:
: nth-last-child CSS pseudo range matches an element in which a + B-1 in the document tree after the siblings.
Then your selector .post-entry: nth-last-child (n + 3) {background: red; }
is selected
div.clear
and footer.grid_12
siblings. Edit Wrap your .post-entry
element inside the block element. , Except for the last two non-siblings of the section
.post-entry
. So make sure that block elements include only the brothers of .post-entry
Comments
Post a Comment