How to Target CSS3 Columns Individually with Selectors

Is it possible to target CSS3 columns individually with selectors?

Unfortunately you cannot change the color of the columns:

It is not possible to set properties/values on column boxes. For example, the background of a certain column box cannot be set and a column box has no concept of padding, margin or borders.

From w3.org: 2. The multi-column model

Targeting nth column (made by column-count)

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

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>

css webkit column access to single column

No, I do not believe this is possible (though it probably should be).

This question was asked in a similar manner here: Is it possible to target CSS3 columns individually with selectors?

You can take a look a the WC's Multi-Column Recommendation here: http://www.w3.org/TR/css3-multicol/

I would look for a javascript solution.

CSS selectors - how to target specific items

So, you need to target each .icon element separately, but don't want/can't use nth-of-type. You can try:

.section li .icon.svg-icon-1{}
.section li .icon.svg-icon-2{}

@edit

.section li:nth-of-type(1) .icon works for me.
Demo

Style the first td column of a table differently

You could use the n-th child selector.

to target the nth element you could then use:

td:nth-child(n) {  
  /* your stuff here */
}

(where n starts at 1)

Is there a way using purely CSS to style columns separately?

As of now, there is no way to target columns in pure CSS. The closest you could get is using JavaScript to split it with new elements, or amend your markup.

This has been asked similarly before: https://stackoverflow.com/a/21238260/271271