Menu
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.
255
Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element)
Explanation: Class selectors are used to specify a group of elements. Id selector specifies a particular unique element.
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.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
