CSS Tricks
CSS Trick

Tailwind Child Selectors

Style all child elements from the parent using [&_selector] syntax.

#tailwind #css #selectors #productivity

Browser Support

✓ Chrome 1+ ✓ Firefox 1+ ✓ Safari 1+ ✗ Edge

Tailwind Child Selectors

Apply styles to children from the parent element.

<!-- Before: Repetitive -->
<table>
  <td class="px-3 py-2">Cell 1</td>
  <td class="px-3 py-2">Cell 2</td>
  <td class="px-3 py-2">Cell 3</td>
</table>


<!-- After: Clean -->
<table class="[&_td]:px-3 [&_td]:py-2">
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</table>

Live Demo

Child Selectors
TAILWIND
0.75rem
CSS Code
.table-demo {
border-collapse: collapse;
width: 100%;
max-width: 350px;
}
.table-demo th,
.table-demo td {
padding: 0.75rem 1rem;
text-align: left;
}
.table-demo thead tr {
background: rgba(139, 92, 246, 0.2);
}
.table-demo th {
border-bottom: 2px solid rgba(139, 92, 246, 0.3);
font-weight: 600;
}
.table-demo td {
border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}
.table-hint {
font-size: 0.75rem;
opacity: 0.6;
margin: 0.75rem 0 0 0;
text-align: center;
}
.table-hint code {
background: rgba(139, 92, 246, 0.2);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
}

Works with any CSS selector: [&>div], [&_p], [&:first-child], etc.

Share this CSS trick

Comments