☰

tailwindcss で div の直接の子すべてにアクセスするにはどうすればいいですか? 質問する

tag-icon • tag-icon html css tailwind-css
tailwindcss で div の直接の子すべてにアクセスするにはどうすればいいですか? 質問する

次のような HTML があります:

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

クラスが「section」の div の直接の子、つまりクラスが「header」および「content」の div にアクセスしたいと思います。

CSS を使用すると次のことができることがわかっています。div.section > div

しかし、これをどうやって行うのかテールウィンド?

ベストアンサー1

tailwind 3.1 では、任意の値を使用して子要素をターゲットにすることができます。

<div class="[&>*]:p-4">...</div>
<div class="[&>p]:mt-0 ">...</div>

https://tailwindcss.com/blog/tailwindcss-v3-1#任意の値ですが、バリアント用です

コメントで @kca が述べたように、Tailwind クラスではセレクター内のスペースをアンダースコア文字に置き換える必要があります。たとえば、直接の子だけでなくすべての子孫を選択する場合は、次のようにします。

<div class="[&_*]:p-4">...</div>
<div class="[&_p]:mt-0 ">...</div>

おすすめ記事