Target a specific column in a CSS Column Layout

Question

In a CSS column layout, I'd need to target first column and its children.

With the following CSS code:

.multi-column {
    @media (min-width: 768px) {
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;

        > li {
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
            overflow: hidden;
        }
    }
}

How to set a different background-color for first column?
How to set a different color for items in the last column?

I'd probably need something like :first-column or something similar pseudo-selector...

I don't believe any browser currently implements them, but you're looking for the [grid-structural selectors](https://www.w3.org/TR/selectors-4/#table-pseudos) of CSS Selectors Level 4. — David Thomas, Sep 07 '18 at 10:26
If the idea is to draw different bg-colors , you could use bg-gradient(update methode similar to the faux-column method) , for the text, mix-blend-mode could be an option. But these are average tricks, they do not select anything. here is the tricky idea https://codepen.io/gc-nomade/pen/VGrdwL — G-Cyrillus, Sep 07 '18 at 22:40

VXp · Answer 1 · 2018-09-07T11:18:23.853

The point is to add additional wrappers, which then become grid-items, to make groups or columns and to be able to target them using appropriate selectors:

Basic example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  /* other grid props which you'd normally have for the container */
}

.grid-item:first-child {background: blue} /* or: ":nth-child(1)", ":first-of-type", ":nth-of-type(1)" */
.grid-item:last-child {color: blue} /* ":nth-child(...)", ":nth-of-type(...)" */

<div class="grid-container">
  <div class="grid-item">
    <div>1.1</div>
    <div>1.2</div>
    <div>1.3</div>
  </div>
  <div class="grid-item">
    <div>2.1</div>
    <div>2.2</div>
    <div>2.3</div>
  </div>
  <div class="grid-item">
    <div>3.1</div>
    <div>3.2</div>
    <div>3.3</div>
  </div>
</div>

You could of course avoid this and do it with numerous selectors, but that's not really optimal, there's no other way atm., maybe :first-column or something similar will arise someday...

Another way, if the use case is suitable, would be to combine grid-template-rows with the grid-auto-flow: column and more specific selectors:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(-n + 3) {background: blue} /* selects first three */
.grid-item:nth-child(n + 7) {color: blue} /* selects all but the first 6 */

<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">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>

Or with just grid-template-columns and default horizontal flow:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(3n + 1) {background: blue} /* selects every third starting from the first  */
.grid-item:nth-child(3n + 3) {color: blue} /* selects every third */

<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">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>

Target a specific column in a CSS Column Layout

1 Answers1