{"id":615,"date":"2019-10-22T14:27:58","date_gmt":"2019-10-22T18:27:58","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=615"},"modified":"2021-01-04T14:10:30","modified_gmt":"2021-01-04T19:10:30","slug":"last-of-type-but-only-if-it-meets-other-conditions-as-well","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/last-of-type-but-only-if-it-meets-other-conditions-as-well\/","title":{"rendered":":last-of-type but only if it meets other conditions as well"},"content":{"rendered":"\n

.gallery-item:nth-of-type(3n+2):last-of-type<\/code><\/p>\n\n\n\n

I was working on a gallery with rows of 3 items per row for which the markup contained <br> after every third .gallery-item and the CSS used floats. It didn’t look how I wanted it to and needed to change it anyway, so I decided to also get rid of the floats and break-tags and use display: flex<\/code> instead.
<\/p>\n\n\n\n\n\n\n\n

Grid would have been ever nicer because it would give more control, but also, for now, requires more lines of CSS to make it work in more browsers, so I opted for flexbox with space-between.<\/p>\n\n\n\n

\"Illustration<\/figure><\/div>\n\n\n\n

The markup isn’t mine but from WordPress, so I can’t\/don’t want to change that, but I can disable the break-tags with CSS: #gallery-2 br { display: none; }<\/code>.<\/p>\n\n\n\n

What I like about space-between is that it makes the child-elements line up flush with the outer edges of the parent element. What I don’t like about it is that if the last row has less items on it, especially if it’s two instead of the number on the previous rows, you’ll get a big gap in the middle. When it’s 3 instead of 5, I don’t mind, or 4 instead of 5, but 2 instead of 4 or instead of 3, I think looks like you didn’t know what you were doing.<\/p>\n\n\n\n

So I wanted to add some CSS rules to the last .gallery-item (last-child would have targeted the last <br>) but only if it was the second .gallery-item of a row.<\/p>\n\n\n\n

#gallery-2 {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap; \/* or it'll put everything onto the same row *\/<\/span>\n    position: relative;\n}\n#gallery-2 br {\n    display: none; \/* or display:flex will take them into account *\/<\/span>\n}\n#gallery-2 .gallery-item {\n    float: none; \/* overriding the original float:left *\/<\/span>\n    width: 300px; \/* overriding the original width:33% *\/<\/span>\n}\n@media only screen and (min-width: 1024px){\n\/* on smaller screens the rows will have 2 or 1 item per row *\/<\/span>\n    #gallery-2 .gallery-item:nth-of-type(3n+2):last-of-type {\n    \/* 2nd item on a row of three but only if it's the last of its kind *\/<\/span>\n        position: absolute;\n        bottom: 0;\n        left: calc(50% - 150px);\n    }\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n
Photo by Curtis MacNewton<\/a> on Unsplash<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
.gallery-item:nth-of-type(3n+2):last-of-type I was working on a gallery with rows of 3 items per row for which the markup contained <br> after every third .gallery-item and the CSS used floats. It didn’t look how I wanted it to and needed to change it anyway, so I decided to also get rid of the floats and break-tags … <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,75,18,41],"class_list":["post-615","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-css","tag-flexbox","tag-pseudo-elements","tag-wordpress","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=615"}],"version-history":[{"count":1,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/615\/revisions"}],"predecessor-version":[{"id":1134,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/615\/revisions\/1134"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}