Targeting Nth Column (Made by Column-Count)

Targeting nth column (made by column-count)

As of now, there is no way to target nth column with pure css.

Use JavaScript to target nth column in table or nth cell of every table row

You can iterate rows and return an array of values

let tds = Array.from(rows, row => row.cells[n]);

CSS - styling every nth column in a table

How about the following; target every 4th <td> and the <td> before (-1) every 4th element:

td:nth-child(4n), td:nth-child(4n-1){
    background-color:#ddd;
}

<table>
<tr>
<td>1a</td><td>1b</td>
<td>2a</td><td>2b</td>
<td>3a</td><td>3b</td>
<td>4a</td><td>4b</td>
</tr>
</table>

CSS columns: target last child in each column?

I think @Vucko has given the answer which points you to the correct direction but it's really not very dynamic. It's applicable only if you know the number of columns and the fixed number of rows. I would like to add this answer providing another workaround to solve your problem. I have to say that it's just a workaround, it does not use any kind of CSS selector because as I said, the solution given by Vucko seems to be the only most direct one.

The idea here is you can just add some pseudo-element to the ul element, make it stick to the bottom and has the same background with the parent ul so that it can hide the bottom lines. It's a pity that it also hides the vertical lines (the column-rule), if that does not really matter, I think you should choose this solution:

ul {
  ...
  position:relative;
}

ul:after {
  content:'';
  width:100%;
  height:34px;
  position:absolute;
  background-color:inherit;
  bottom:0;
  left:0;
} 

Fiddle for 3 columns. You can change the number of columns without having to change any other.

NOTE: I'm pretty sure that there is no direct solution to your problem (which can select the last item in each column dynamically). Because all the items are laid out as columns but in fact they are just inline items contained by the parent ul.

Css column-count should respect only first child

You seem to have misunderstood the purpose of column-count and are therefore misusing it.

It's purpose is to take some content and divide it into the given number of columns with as close to equal amounts of content as possible. The only tool you have is break-inside:avoid to keep "block-like" content together.

But if you do use it to make one column taller than the rest, your are making all columns the same height, because that's what CSS columns does. So, for example, using break-inside:avoid on .day. will cause other shorter .days to pile up in the same column. It would only work if days in your week had equal amounts of content, which is clearly not the case.

First question that comes in mind is: why not use flex? Since you probably want your day's widths equal, you need to add width to the children. By default display:flex children have flex: 0 1 auto, which makes them flexible, depending on contents.

.week {
    display: flex;
}
.week > * {
  width: calc(100% / 7)
}

Fiddle.

How to target a specific column or row in CSS Grid Layout?

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

Grid columns and rows have none of these "hooks".

You'll have to target the grid items directly.

You wrote:

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr;  grid-gap: 10px;  padding: 10px;  height: 50vh;  background-color: gray;}
grid-item {  background-color: lightgreen;}
grid-item:nth-child(2n) {  border: 2px dashed red;}

<grid-container>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item>  <grid-item></grid-item></grid-container>

---

Related Topics