{"id":366252,"date":"2022-06-15T07:15:50","date_gmt":"2022-06-15T14:15:50","guid":{"rendered":"https:\/\/css-tricks.com\/?p=366252"},"modified":"2022-06-15T07:15:52","modified_gmt":"2022-06-15T14:15:52","slug":"conditionally-styling-selected-elements-in-a-grid-container","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/conditionally-styling-selected-elements-in-a-grid-container\/","title":{"rendered":"Conditionally Styling Selected Elements in a Grid Container"},"content":{"rendered":"\n<p>Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/catpcha-crosswalks.png?resize=302%2C461&#038;ssl=1\" alt=\"\" class=\"wp-image-366253\" width=\"302\" height=\"461\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/catpcha-crosswalks.png?w=402&amp;ssl=1 402w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/catpcha-crosswalks.png?resize=196%2C300&amp;ssl=1 196w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>&#x1f9d0;<\/figcaption><\/figure>\n\n\n\n<p>I found a neat way to display selectable options in a grid. No, not recreating that reCAPTCHA, but simply being able to select multiple items. And when two or more adjoining items are selected, we can use clever <code>:nth-of-type<\/code> combinators, pseudo elements, and the <code>:checked<\/code> pseudo-class to style them in a way where they look grouped together.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwQzWqP\" src=\"\/\/codepen.io\/anon\/embed\/VwQzWqP?height=550&amp;theme-id=1&amp;slug-hash=VwQzWqP&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwQzWqP\" title=\"CodePen Embed VwQzWqP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The whole idea of combinators and pseudos to get the rounded checkboxes came from a <a href=\"https:\/\/css-tricks.com\/fun-times-styling-checkbox-states\/\">previous article I wrote<\/a>. It was a simple single-column design:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdwbXga\" src=\"\/\/codepen.io\/anon\/embed\/mdwbXga?height=550&amp;theme-id=1&amp;slug-hash=mdwbXga&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdwbXga\" title=\"CodePen Embed mdwbXga\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This time, however, the rounding effect is applied to elements along both the vertical and horizontal axes on a grid. You don\u2019t have to have read my last article on checkbox styling for this since I\u2019m going to cover everything you need to know here. But if you\u2019re interested in a slimmed down take on what we\u2019re doing in this article, then that one is worth checking out.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"before-we-start\">Before we start\u2026<\/h3>\n\n\n<p>It\u2019ll be useful for you to take note of a few things. For example, I\u2019m using static HTML and CSS in my demo for the sake of simplicity. Depending on your application you might have to generate the grid and the items in it dynamically. I\u2019m leaving out practical checks for accessibility in order to focus on the effect, but you would definitely want to consider that sort of thing in a production environment.<\/p>\n\n\n\n<p>Also, I\u2019m using CSS Grid for the layout. I\u2019d recommend the same but, of course, it\u2019s only a personal preference and your mileage may vary. For me, using grid allows me to easily use sibling-selectors to target an item\u2019s <code>::before<\/code> and <code>::after<\/code> pseudos.<\/p>\n\n\n\n<p>Hence, whatever layout standard you might want to use in your application, make sure the pseudos can still be targeted in CSS and ensure the layout stays in tact across different browsers and screens.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-get-started-now\">Let\u2019s get started now<\/h3>\n\n\n<p>As you may have noticed in the earlier demo, checking and unchecking a checkbox element modifies the design of the boxes, depending on the selection state of the other checkboxes around it. This is possible because I styled each box using the pseudo-elements of its adjacent elements instead of its own element.<\/p>\n\n\n\n<p>The following figure shows how the <code>::before<\/code> pseudo-elements of boxes in each <em>column<\/em> (except the first column) overlap the boxes to their left, and how the <code>::after<\/code> pseudo-elements of boxes in each <em>row<\/em> (except the first row) overlap the boxes above.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"994\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram.png?resize=1360%2C994&#038;ssl=1\" alt=\"Two grids of checkboxes showing the placement of before and after pseudos.\" class=\"wp-image-366254\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram.png?w=1360&amp;ssl=1 1360w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram.png?resize=300%2C219&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram.png?resize=1024%2C748&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram.png?resize=768%2C561&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"heres-the-base-code\">Here\u2019s the base code<\/h3>\n\n\n<p>The markup is pretty straightforward:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;main>\n  &lt;input type=checkbox> \n  &lt;input type=checkbox> \n  &lt;input type=checkbox>\n  &lt;!-- more boxes -->\n&lt;\/main><\/code><\/pre>\n\n\n\n<p>There\u2019s a little more going on in the initial CSS. But, first, the grid itself:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* The grid *\/\nmain {\n  display: grid;\n  grid:  repeat(5, 60px) \/ repeat(4, 85px);\n  align-items: center;\n  justify-items: center;\n  margin: 0;\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s a grid of five rows and four columns that contain checkboxes. I decided to wipe out the default appearance of the checkboxes, then give them my own light gray background and super rounded borders:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* all checkboxes *\/\ninput {\n  -webkit-appearance: none;\n  appearance: none;\n  background: #ddd;\n  border-radius: 20px;\n  cursor: pointer;\n  display: grid;\n  height: 40px;\n  width: 60px;\n  margin: 0;\n}<\/code><\/pre>\n\n\n\n<p>Notice, too, that the checkboxes themselves are grids. That\u2019s key for placing their <code>::before<\/code> and <code>::after<\/code> pseudo-elements. Speaking of which, let\u2019s do that now:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* pseudo-elements except for the first column and first row *\/\ninput:not(:nth-of-type(4n+1))::before,\ninput:nth-of-type(n+5)::after {\n  content: '';        \n  border-radius: 20px;\n  grid-area: 1 \/ 1;\n  pointer-events: none;\n}<\/code><\/pre>\n\n\n\n<p>We\u2019re only selecting the pseudo-elements of checkboxes that are not in the first column or the first row of the grid. <code>input:not(:nth-of-type(4n+1))<\/code> starts at the first checkbox, then selects the <code>::before<\/code> of every fourth item from there. But notice we\u2019re saying <code>:not()<\/code>, so really what we\u2019re doing is <em>skipping<\/em> the <code>::before<\/code> pseudo-element of every fourth checkbox, starting at the first. Then we\u2019re applying styles to the <code>::after<\/code> pseudo of every checkbox from the fifth one.<\/p>\n\n\n\n<p>Now we can style both the <code>::before<\/code> and <code>::after<\/code> pseudos for each checkbox that is not in the first column or row of the grid, so that they are moved left or up, respectively, hiding them by default.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* pseudo-elements other than the first column *\/\ninput:not(:nth-of-type(4n+1))::before { \n  transform: translatex(-85px);\n}\n\n\/* pseudo-elements other than the first row *\/\ninput:nth-of-type(n+5)::after {\n transform: translatey(-60px); \n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"styling-the-checked-state\">Styling the <code>:checked<\/code> state<\/h3>\n\n\n<p>Now comes styling the checkboxes when they are in a <code>:checked<\/code> state. First, let\u2019s give them a color, say a <code>limegreen<\/code> background:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:checked { background: limegreen; }<\/code><\/pre>\n\n\n\n<p>A checked box should be able to re-style all of its adjacent checked boxes. In other words, if we select the eleventh checkbox in the grid, we should also be able to style the boxes surrounding it at the top, bottom, left, and right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1242\" height=\"694\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654511257743_grid.png?resize=1242%2C694&#038;ssl=1\" alt=\"A four-by-five grid of squares numbered one through 20. 11 is selected and 7, 10, 12, and 15 are highlighted.\" class=\"wp-image-366255\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654511257743_grid.png?w=1242&amp;ssl=1 1242w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654511257743_grid.png?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654511257743_grid.png?resize=1024%2C572&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654511257743_grid.png?resize=768%2C429&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>This is done by targeting the correct pseudo-elements. How do we do that? Well, it depends on the actual number of columns in the grid. Here\u2019s the CSS if two adjacent boxes are checked in a 5\u2a094 grid:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* a checked box's right borders (if the element to its right is checked) *\/\ninput:not(:nth-of-type(4n)):checked + input:checked::before { \n  border-top-right-radius: 0; \n  border-bottom-right-radius: 0; \n  background: limegreen;\n}\n\/* a checked box's bottom borders (if the element below is checked) *\/\ninput:nth-last-of-type(n+5):checked + * + * + * + input:checked::after {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n  background: limegreen;\n}\n\/* a checked box's adjacent (right side) checked box's left borders *\/\ninput:not(:nth-of-type(4n)):checked + input:checked + input::before {         \n  border-top-left-radius: 0; \n  border-bottom-left-radius: 0; \n  background: limegreen;\n}\n\/* a checked box's adjacent (below) checked box's top borders *\/\ninput:not(:nth-of-type(4n)):checked + * + * + * +  input:checked + input::before { \n  border-top-left-radius: 0; \n  border-top-right-radius: 0; \n  background: limegreen;\n}<\/code><\/pre>\n\n\n\n<p>If you prefer you can generate the above code dynamically. However, a typical grid, say an image gallery, the number of columns will be small and likely a fixed number of items, whereas the rows might keep increasing. Especially if designed for mobile screens. That\u2019s why this approach is still an efficient way to go. If for some reason your application happens to have limited rows and expanding columns, then consider rotating the grid sideways because, with a stream of items, CSS Grid arranges them left-to-right and top-to-bottom (i.e. row by row).<\/p>\n\n\n\n<p>We also need to add styling for the last checkboxes in the grid \u2014 they\u2019re not all covered by pseudo-elements as they are the last items in each axis.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* a checked box's (in last column) left borders *\/\ninput:nth-of-type(4n-1):checked + input:checked {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\/* a checked box's (in last column) adjacent (below) checked box's top borders *\/\ninput:nth-of-type(4n):checked + * + * + * + input:checked {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}<\/code><\/pre>\n\n\n\n<p>Those are some tricky selectors! The first one\u2026<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:nth-of-type(4n-1):checked + input:checked<\/code><\/pre>\n\n\n\n<p>\u2026is basically saying this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>A checked <code>&lt;input&gt;<\/code> element next to a checked <code>&lt;input&gt;<\/code> in the second last column.<\/p><\/blockquote>\n\n\n\n<p>And the <code>nth-of-type<\/code> is calculated like this:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">4(0) - 1 = no match\n4(1) - 1 = 3rd item\n4(2) - 1 = 7th item\n4(3) - 1 = 11th item\netc.<\/code><\/pre>\n\n\n\n<p>So, we\u2019re starting at the third checkbox and selecting every fourth one from there. And if a checkbox in that sequence is checked, then we style the checkboxes adjacent, too, if they are also checked.<\/p>\n\n\n\n<p>And this line:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:nth-of-type(4n):checked + * + * + * + input:checked<\/code><\/pre>\n\n\n\n<p>Is saying this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>An <code>&lt;input&gt;<\/code> element provided that is checked, is directly adjacent to an element, which is directly adjacent to another element, which is also directly adjacent to another element, which, in turn, is directly adjacent to an <code>&lt;input&gt;<\/code> element that is in a checked state.<\/p><\/blockquote>\n\n\n\n<p>What that means is we\u2019re selecting every fourth checkbox that is checked. And if a checkbox in that sequence is checked, then we style the next fourth checkbox from that checkbox if it, too, is checked.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwQzWqP\" src=\"\/\/codepen.io\/anon\/embed\/VwQzWqP?height=550&amp;theme-id=1&amp;slug-hash=VwQzWqP&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwQzWqP\" title=\"CodePen Embed VwQzWqP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"putting-it-to-use\">Putting it to use<\/h3>\n\n\n<p>What we just looked at is the general principle and logic behind the design. Again, how useful it is in your application will depend on the grid design.<\/p>\n\n\n\n<p>I used rounded borders, but you can try other shapes or even experiment with background effects (<a href=\"https:\/\/css-tricks.com\/css-hover-effects-background-masks-3d\/\">Temani has you covered for ideas<\/a>). Now that you know how the formula works, the rest is totally up to your imagination.<\/p>\n\n\n\n<p>Here\u2019s an instance of how it might look in a simple calendar:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poaZQNx\" src=\"\/\/codepen.io\/anon\/embed\/poaZQNx?height=550&amp;theme-id=1&amp;slug-hash=poaZQNx&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poaZQNx\" title=\"CodePen Embed poaZQNx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Again, this is merely a rough prototype using static markup. And, there would be lots and lots of accessibility considerations to consider in a calendar feature.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>That\u2019s a wrap! Pretty neat, right? I mean, there\u2019s nothing exactly \u201cnew\u201d about what\u2019s happening. But it\u2019s a good example of <em>selecting things<\/em> in CSS. If we have a handle on more advanced selecting techniques that use combinators and pseudos, then our styling powers can reach far beyond the styling one item \u2014 as we saw, we can conditionally style items based on the state of another element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever.<\/p>\n","protected":false},"author":250902,"featured_media":366258,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Some mind bend-y :nth-of-type-age here from @rpsthecoder for a nice way to style grouped selections.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[686,867,1154],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1360%2C994&ssl=1","jetpack-related-posts":[{"id":292093,"url":"https:\/\/css-tricks.com\/a-little-reminder-that-pseudo-elements-are-children-kinda\/","url_meta":{"origin":366252,"position":0},"title":"A Little Reminder That Pseudo Elements are Children, Kinda.","date":"July 8, 2019","format":false,"excerpt":"Here's a container with some child elements: item item item If I do: .container::before { content: \"x\" } I'm essentially doing: [[[ ::before psuedo-element here ]]] item item item Which will behave just like a child element mostly. One tricky thing is that no selector selects it other than the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/pseudo-child.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350670,"url":"https:\/\/css-tricks.com\/css-pseudo-commas\/","url_meta":{"origin":366252,"position":1},"title":"CSS Pseudo Commas","date":"August 30, 2021","format":false,"excerpt":"A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation. CodePen Embed Fallback How it works The trick? First, it's to make\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/inline-list.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342736,"url":"https:\/\/css-tricks.com\/nth-child-between-two-fixed-indexes\/","url_meta":{"origin":366252,"position":2},"title":":nth-child Between Two Fixed Indexes","date":"June 29, 2021","format":false,"excerpt":"I needed to select some elements between two fixed indexes the other day\u2009\u2014\u2009like literally the second through fifth elements. Ironically, I have a whole post on \"Useful :nth-child Recipes\" but this wasn't one of them. The answer, it turns out, isn't that complicated. But it did twist my brain a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/nth-selector.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367178,"url":"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\/","url_meta":{"origin":366252,"position":3},"title":"Exploring CSS Grid\u2019s Implicit Grid and Auto-Placement Powers","date":"August 1, 2022","format":false,"excerpt":"When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows, and grid-template-areas. And from there, the next step is to place\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_F4C924AEFDB642C9861B01422787157264225531682D164A8C42B48A83B84E89_1656674978920_image.png?fit=608%2C742&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334958,"url":"https:\/\/css-tricks.com\/how-to-map-mouse-position-in-css\/","url_meta":{"origin":366252,"position":4},"title":"How to Map Mouse Position in CSS","date":"March 1, 2021","format":false,"excerpt":"Let\u2019s look at how to get the user\u2019s mouse position and map it into CSS custom properties: --positionX and --positionY. We could do this in JavaScript. If we did, we could do things like make make an element draggable or move a background. But actually, we can still do similar\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-mouse-cursor-mapping.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282730,"url":"https:\/\/css-tricks.com\/ie10-compatible-grid-auto-placement-with-flexbox\/","url_meta":{"origin":366252,"position":5},"title":"IE10-Compatible Grid Auto-Placement with Flexbox","date":"February 18, 2019","format":false,"excerpt":"If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I've discovered a clever CSS-only way to use grid auto-placement in IE10+! Now, it's not actually CSS Grid, but without looking at the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366252"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250902"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=366252"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366252\/revisions"}],"predecessor-version":[{"id":366441,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366252\/revisions\/366441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/366258"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=366252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=366252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=366252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}