- 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 CSSCenter an absolute element in TailwindCSSHow to use !important in TailwindCSSAdd class to child when hovering on parent in TailwindCSSAdd a box shadow to only one side of an elementAdd text shadow with Tailwind CSSAdd dots if text is too longAccess child elements in TailwindCSSCreate a neon effect with TailwindCSSSelect the nth child in TailwindCSSForce line break in a long word using CSSChange bullet size in HTMLUse emoji instead of list styleSelect first child in TailwindCSSHow to use calc() in TailwindCSSHow to use CSS variables in TailwindCSSCreate horizontal rule with text using TailwindCSSWrite vertical text in HTMLUsing :not in TailwindCSS
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