<h1 id="tailwindcss%E3%81%A7%E5%AD%90%E8%A6%81%E7%B4%A0%E3%82%92id%E3%81%A7%E6%8C%87%E5%AE%9A" data-line="0" class="code-line">
<a class="header-anchor-link" href="#tailwindcss%E3%81%A7%E5%AD%90%E8%A6%81%E7%B4%A0%E3%82%92id%E3%81%A7%E6%8C%87%E5%AE%9A" aria-hidden="true"></a> TailwindCSSで子要素をidで指定</h1>
特定の子要素をidで指定する方法が便利だったのでメモ
<h2 id="%E3%82%B3%E3%83%BC%E3%83%89" data-line="3" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> コード</h2>
例えばbuttonタグがdiv内にいくつかあり、id名がcloseの場合だけ非表示にしたいという場合、以下のようになる。 
buttonを指定した横に#id名とするだけ。クラス名の場合は.class名とするとその要素だけstyleがきく
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="6">&lt;div
 className="lg:max-w-[42rem] [&amp;_button#close]:hidden"
 &gt;
&lt;/div&gt;
</code></pre></div>

TailwindCSSで子要素をidで指定

コード

Discussion