Styling The First Item in a CSS Column

Javascript set first column style

You can just use document.querySelectorAll('tr th:first-child, tr td:first-child') then iterate the result setting the styles you want.

let firstCol = document.querySelectorAll('tr th:first-child, tr td:first-child')
for (let i = 0; i < firstCol.length; i++) {
  firstCol[i].style.color = 'red'
}

<table>
  <tr>
    <th>one</th>
    <th>two</th>
    <th>three</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

How to Style First Column Only In a Dynamic Bootstrap Row

Try

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

Example

.row div[class^="col"]:first-child {    border: 3px solid black;}

<div class="row">  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    one  </div>  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    two  </div></div>
<div class="row">  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    Three  </div>  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    Four  </div></div>

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)

CSS Style First Row and Column

Your selector should be

tr:not(:nth-child(1)) td

That selects every <td> element in every row other than the first row.

If you want all the first cells to not have a border, I'd add a separate rule:

#tablegrid tr td:first-child {
  border-style: none;
}

That should go after the first rule of course.

style only first item in each flexbox row

As @AndyHoffman already mentioned in the comments, (as of March 2019) it is impossible to do it with pure css. If you tolerate a bit of javascript, then you could iterate over all the flex children and see if their position indicates that they are in the first column and apply styling accordingly. A rudimentary example is shown in the snippet below:

function highlightFirst(){  let flexChildren = document.querySelectorAll('.content');  let leftPosition = flexChildren[0].offsetLeft;  for(let flexChild of flexChildren){    if(flexChild.offsetLeft <= leftPosition){      flexChild.classList.add('firstColumn');    }else{      flexChild.classList.remove('firstColumn');    }  }}window.addEventListener('resize', highlightFirst);highlightFirst();

* {  list-style:none;  margin: 0;  padding: 0;}
.wrapper {  display: flex;  flex-wrap: wrap;  border: solid 1px black;}
.content {  height: 20px;  background: grey;  margin: 5px;}
.firstColumn {  border: 2px dashed red;}

<ul class="wrapper">    <li class="content" style="width:  14px;">1</li>    <li class="content" style="width:  77px;">2</li>    <li class="content" style="width:  41px;">3</li>    <li class="content" style="width:  94px;">4</li>    <li class="content" style="width:  76px;">5</li>    <li class="content" style="width:  61px;">6</li>    <li class="content" style="width:  81px;">7</li>    <li class="content" style="width:  70px;">8</li>    <li class="content" style="width:  22px;">9</li>    <li class="content" style="width:  29px;">10</li>    <li class="content" style="width:  27px;">11</li>    <li class="content" style="width:  22px;">12</li>    <li class="content" style="width:  56px;">13</li>    <li class="content" style="width:  32px;">14</li>    <li class="content" style="width:  55px;">15</li>    <li class="content" style="width:  34px;">16</li>    <li class="content" style="width:  75px;">17</li>    <li class="content" style="width:  97px;">18</li>    <li class="content" style="width:  25px;">19</li>    <li class="content" style="width:  48px;">20</li></ul>

How to make first and last element of a grid different sizes from the other elements?

You can make all columns 45px wide and then have all items except the first and the last item span two columns, e.g.:

Sample Image

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
}
.grid div {
  border: 1px solid blue;
}

.grid div {
  grid-column: span 2;
}
.grid div:first-child, .grid div:last-child {
  grid-column: span 1;
}

<div class="grid" style='max-width:500px'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

CSS style for first table column except first cell of that column

Can you not just override it be putting the chart class after it e.g.

   .census td:first-child {
        background-color: #F0F8FE;
        width: 250px;
    }

    .census td.chart {
      width: auto;
      etc...
    }

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

To style an arbitrary row, you could use a wrapper element with its display set to contents. See the code snippet below:

.grid-container {  display: grid;  grid-template-columns: repeat(5, 1fr);  grid-gap: 2px;}
.grid-item {  border: 1px solid black;  padding: 5px;}
.grid-row-wrapper {  display: contents;}
.grid-row-wrapper > .grid-item {  background: skyblue;}

<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-row-wrapper">    <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>  <div class="grid-item">11</div>  <div class="grid-item">12</div>  <div class="grid-item">13</div>  <div class="grid-item">14</div>  <div class="grid-item">15</div>  <div class="grid-item">16</div>  <div class="grid-item">17</div>  <div class="grid-item">18</div>  <div class="grid-item">19</div>  <div class="grid-item">20</div></div>

Apply style to cells of first row

Use tr:first-child to take the first tr:

.category_table tr:first-child td {
    vertical-align: top;
}

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}