[FEATURE] last-child or last-of-type on :not selector snippet
drapisarda opened this issue · 11 comments
Hi to all!
It could be useful to add a cite to :last-of-type selector in the ":not selector" snippet.
Last-of-type is generally more reliable than :last-child in that context or at least a nice thing to be aware of.
I thought of this, reading this article by Timothy B. Smith
https://brightlycolored.org/2017/02/css-tip-use-not-to-save-time-and-lines-of-code/
This snippet does not work because :last-of-type works only on type selectors.
https://jsfiddle.net/znLh8vbg/2/
Your snippet actually works if you close the small tag:
this is not valid HTML
<a href="/link-to-post/" title="Permalink to post"> <h2>Post Title</h2> <small>Thurs, Feb 16, 2017<small> </a>
this is valid
<a href="/link-to-post/" title="Permalink to post"> <h2>Post Title</h2> <small>Thurs, Feb 16, 2017</small> </a>
Updated (and working) snippet here: https://jsfiddle.net/m2qz8c14/
Sorry, here the fixed snippet.
https://jsfiddle.net/m2qz8c14/12/
As you can see if the first element does not have the .post class the code stop working.
The css actually works. There's no "not last" element, so the "not last element" style is not applied, correctly.
The proper css should select li:not(:last-of-type) to achieve the desired behavior. Or you have to use .post class for all the li.
What you're addressing as a non working code is wrong css (or wrong html, if you prefere)
@drapisarda Ok sorry, i was confused with :first-of-type that have the issue of type-selector: There the snippet:
https://jsfiddle.net/m2qz8c14/24/
OT:
which issue? https://jsfiddle.net/t2kuvek3/
OT UPDATE:
maybe you mean this https://jsfiddle.net/1n9hLu2j/
No. The issue in my previous snippet. The second <li> should be red.
https://jsfiddle.net/m2qz8c14/24/
:first-of-type and :last-of-type combined with only a class will match the first/last type of element element with that class. You must combine a type selector to match the exact element. In fact, the link in the issue description will break if you have another element type with the same class .post :
OK. Now I got it. In .lorem:last-of-type the matching element is both a .lorem classed element and the last sibling of that element. It's similar for .lorem:first-of-type .
Known that I still propose to mention :not(:last-of-type) in the 30SoCSS snippets.
Yes yes, i was confused about that but the snippet is valid, but i think is a bit similar to
https://atomiks.github.io/30-seconds-of-css/#not-selector
and https://atomiks.github.io/30-seconds-of-css/#sibling-fade
Closing this due to inactivity. Feel free to comment below if you want to reopen this discussion.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.