Are there selectors that target elements in certain grid positions?

Asked 24/5, 2017 at 15:7 Answered 31/8, 2021 at 16:51

I have a CSS grid with a bunch of auto-flowed grid items. Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I do not know from the source order which items will be in certain positions in the grid. This means that styling with :nth-child() will not be reliable.

I would like to add styling to items in certain grid columns, (mostly the last column). Is there a CSS selector that will let me style these items?

For example, in this demo, how would I style boxes 3, 5, and 9, (codepen here)?

.grid-container {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }

    .grid-item {
        background-color: #aea;
        text-align:center;
        font-size:3em;
        min-height:3em;
        line-height: 3em;
    }

    .grid-item.double {
        grid-column-start: span 2;
        grid-row-start: span 2;
    }

<body>
<div class="grid-container">

    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item double">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
</div>
</body>

Edit: The code will end up in a CMS and may change in the future.

Strath answered 24/5, 2017 at 15:7 Comment(9)

Maybe this question could help you in some way? – Consulate 24/5, 2017 at 15:15

@kevinb. that's bootstraps "grid" framework. OP' using CSS native display: grid; – Kazachok 24/5, 2017 at 15:16

Why not just use :nth-child? – Kazachok 24/5, 2017 at 15:16

@Michael Coker: "Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I don't know from the source order which items will be in certain positions in the grid." – Calvo 24/5, 2017 at 15:17

Michael: Because OP doesn't know in which order or which grid will appear, whether it's a double or a regular one. – Dermatology 24/5, 2017 at 15:17

@MichaelCoker sorry for the mistake and thanks for pointing out. Meanwhile I found this interesting CSS Grid Guide, how about this? – Consulate 24/5, 2017 at 15:23

@MichaelCoker @kevin-b I was actually looking at the source of that question - it seems that Bootstrap uses native grid. However, it relies on position-specific class names, (like .grid-col-4 or something), which, if we were using them, would work, but in this case we want to do it without. I've got that guide open in another tab ;) – Strath 24/5, 2017 at 15:31

@JohnB oh interesting, I haven't seen any usage of actual grid in bootstrap, but I don't really use bootstrap personally so I could be out of the loop. doesn't seem like they would ship that until there is better browser support. Even bs4, which is currently in alpha, uses flex for their grid. v4-alpha.getbootstrap.com/examples/grid what page are you looking at? – Kazachok 24/5, 2017 at 15:35

@MichaelCoker I did a quick Find for 'grid' here, but on further inspection I was wrong - it looks like it's just a -ms-grid-row... that's used as part of Flexbox. – Strath 24/5, 2017 at 15:38

There are no selectors for matching elements in certain grid positions when the grid is rendered using CSS. The grid-structural selectors introduced in Selectors 4 only match elements based on grid structures expressed in document semantics, such as tables in HTML (which also means that they cannot match elements based on grid semantics when they are non-tabular elements rendered using display: table-* either).

A similar problem exists with flexbox: there are no selectors for matching specific flex items based on how they are laid out. In general, there are no selectors matching elements based on their layout as governed by CSS. Selectors only match elements based on document semantics (source order, etc).

To style the desired elements, you will need to identify them using some other means, such as a client-side script, or some backend logic that labels elements with classes based on their grid positions (if the grid layout is configured within the backend). How you do this is outside the scope of this question.

Calvo answered 24/5, 2017 at 15:23 Comment(3)

That's what I was afraid of. I guess we have to wait for Selectors 5 or beyond for this. – Strath 24/5, 2017 at 15:42

grid colums/rows can be targeted from css. This is used to put areas to some specific position in the grid. Thus I do not see any reason why pseudo selectors are not implemented. – Gorlin 5/9, 2018 at 18:44

@Eugen Konkov: Generally, selectors that match elements based on their layout are not implemented because 1) targeting them and styling them so they stop matching those layout conditions will create cyclic dependencies 2) those selectors will be meaningless outside of CSS. These are the reasons given by the CSSWG and I don't represent them. – Calvo 5/9, 2018 at 23:7

I recently published an NPM package, self-aware-grid, for helping with this kind of thing. It determines which elements are on which column and row, and applies CSS classes accordingly so you can style those elements however you see fit.

I haven't tested it on grids with children of varying sizes, so I would expect that, unless by some serendipitous accident, only same-size children are supported.

If you want to try it out:

Meany answered 31/8, 2021 at 16:51 Comment(0)

Recommended topics

Hot tags