How to select the elements that are alone in a row with css?

Question

I am working with flexbox to make the grid of a webpage and instead of adding breakpoints I think would be best to select the elements that are alone in a row. For example, using flex-wrap: wrap, select the elements that eventually become alone in a row.

Example of what I was expecting but doesn't exists:

.row {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  flex-wrap: wrap;
}

.row > .column {
   margin: 15px;
   width: auto;

   &:alone-in-row { // HERE 
     width: 100%;
     text-align: center;
   }
}

Long story short, Not possible with CSS – Rainbow Dec 16 '19 at 17:49 — Rainbow, Dec 16 '19 at 17:49

score 0 · Answer 1 · answered Dec 16 '19 at 18:00

You could use the :only-child pseudoselector:

.row {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  flex-wrap: wrap;
}

.row .column {
  margin: 15px;
  width: auto;
}

.row .column:only-child {
  width: 100%;
  text-align: center;
}

<table>
  <tr class="row">
    <td class="column">1</td>
    <td class="column">2</td>
  </tr>
  <tr class="row">
    <td class="column">1</td>
  </tr>
</table>

How to select the elements that are alone in a row with css?

1 Answers1