- Instant help with your CSS coding problems

Select the nth child in TailwindCSS

by Mike
Question:
How to select the nth child in TailwindCSS?
Answer:
<table class="w-80">
    <tbody class="[&>*:nth-child(odd)]:bg-teal-200">
        <tr><td>Line - 1</td></tr>
        <tr><td>Line - 2</td></tr>
        <tr><td>Line - 3</td></tr>
        <tr><td>Line - 4</td></tr>
        <tr><td>Line - 5</td></tr>
    </tbody>
</table>
Description:

To access the nth child using TailwindCSS you can use the arbitrary variants, that are format strings that represent the selector, wrapped in square brackets. You can write custom selector modifiers directly in your HTML. Just like arbitrary values let you use custom values with your utility classes, arbitrary variants let you write custom selector modifiers directly in your HTML:

For example to create a zebra styled table you can use the arbitrary variant: [&>*:nth-child(odd)]  

Where:

  • The ampersand & is used to reference the parent selector.
  • The greater than symbol > is used to select direct children of an element.
  • The asterisk * is used to select all descendants of an element.

So the following code:

<table class="w-80">
    <tbody class="[&>*:nth-child(odd)]:bg-teal-200">
        <tr><td>Line - 1</td></tr>
        <tr><td>Line - 2</td></tr>
        <tr><td>Line - 3</td></tr>
        <tr><td>Line - 4</td></tr>
        <tr><td>Line - 5</td></tr>
    </tbody>
</table>

Results the following output:

nth child zebra table

Reference:
TailwindCSS pseudo clas reference
Share "How to select the nth child in TailwindCSS?"
Related snippets:
Tags:
select, choose, nth, odd, even, child, tailwind
Technical term:
Select the nth child in TailwindCSS
Trending articles
Use clip path in TailwindCSSSet focus border in TailwindCSSCreate hover underline animation in TailwindCSSTruncate text in TailwindCSSCreate triangles with TailwindCSSCreate custom toggle button with TailwindCSSImplement Dark mode with TailwindCSSHow to create custom checkboxes in TailwindCSSFix the Unknown at rule @tailwind warning in VSCodeFix TailwindCSS breaks existing styles
Trending snippets
Remove focus border around input elementCreate endless rotation animation in CSSAdd a box shadow to only one side of an elementCenter an absolute element in TailwindCSSAdd dots if text is too longAdd class to child when hovering on parent in TailwindCSSAdd text shadow with Tailwind CSSForce line break in a long word using CSSSelect the nth child in TailwindCSSAccess child elements in TailwindCSSCreate a neon effect with TailwindCSSHow to use !important in TailwindCSSChange bullet size in HTMLHow to use CSS variables in TailwindCSSWrite vertical text in HTMLSet line spacing in CSSSelect first child in TailwindCSSDisable text selection with CSSHow to use calc() in TailwindCSSSet custom cursor in CSS
Network articles
Fix the ReactDOM.render is no longer supported in React 18How to run useEffect only once in ReactSend JSON data with PostmanCheck if a value is a number in JavaScriptAdd CSS to content script in Manifest V3Split editor window in VS CodeDisable tooltip in VS CodeShow hidden characters in VS CodeStart PHP built in webserverRemove all extra spaces from a string in JavaScriptConvert a string to sentence case in JavaScriptGenerate a random number in a range with JavaScriptSolving the Uncaught SyntaxError: Cannot use import statement outside a moduleGet the value of selected radio button in JavaScriptDuplicate line or selection in VS CodeConvert timestamp to DateTime in PHPConvert hexadecimal to binary in PHPPHP regular expression tutorialSet media query in CSSGet the last day of a month in Java
Interesting things
OpanAi's ChatGPT