نحوه دسترسی به Direct Children of a Div در Tailwind CSS v3

در این آموزش، نحوه هدف‌گیری و استایل کردن فرزندان مستقیم یک div را با استفاده از نحو ارزش دلخواه قدرتمند Tailwind CSS v3 بررسی خواهیم کرد. این ویژگی به خصوص در هنگام برخورد با چیدمان های تو در تو، امکان استایل انعطاف پذیرتر و دقیق تر را فراهم می کند.

مشکل

ساختار HTML زیر را در نظر بگیرید:

 class="section">
   
 class="footer">footer
   
 class="content">
      
sub contents 1              
      
sub contents 2
   

ما می‌خواهیم فقط بچه‌های مستقیم div را با کلاس “بخش” استایل کنیم، که دیوهای با کلاس‌های “footer” و “content” هستند. در CSS معمولی، ما از انتخابگر ترکیب‌کننده فرزند مانند زیر استفاده می‌کنیم: div.section > div. اما چگونه در Tailwind CSS v3 به این امر دست یابیم؟

راه حل: نحو ارزش دلخواه

Tailwind CSS v3 دستور مقدار دلخواه را معرفی کرد که به ما امکان استفاده از آن را می دهد & نویسه برای ارجاع به انتخابگر فعلی. این ویژگی یک راه قدرتمند برای هدف قرار دادن کودکان مستقیم ارائه می دهد. در اینجا نحوه انجام این کار آمده است:

نحو: [&>*]:{class}

• & عنصر فعلی را نشان می دهد
• > ترکیب کننده کودک است
• * همه فرزندان مستقیم را انتخاب می کند
• :{class} کلاس Tailwind مشخص شده را اعمال می کند

بیایید با چند مثال این را در عمل ببینیم.

مثال 1: افزودن بالشتک به همه کودکان مستقیم

 class="section [&>*]:p-4">
   
 class="footer">footer
   
 class="content">
      
sub contents 1              
      
sub contents 2
   

در این مثال، [&>*]:p-4 بالشتک 1rem (p-4) را به تمام فرزندان مستقیم بخش “بخش” اضافه می کند.

مثال 2: هدف قرار دادن عناصر خاص فرزند

 class="section [&>div]:bg-gray-100 [&>.footer]:text-red-500">
   
 class="footer">footer
   
 class="content">
      
sub contents 1              
      
sub contents 2
   

در اینجا، ما سبک های مختلفی را برای کودکان مستقیم مختلف اعمال می کنیم:

• [&>div]:bg-gray-100 یک پس‌زمینه خاکستری روشن به همه کودکان مستقیم div اضافه می‌کند.
• [&>.footer]:text-red-500 متن را فقط برای کودک مستقیم با کلاس “پانویس” قرمز می کند.

مثال 3: ترکیب چند سبک

 class="section [&>*]:p-4 [&>*]:mb-2 [&>.content]:bg-blue-100">
   
 class="footer">footer
   
 class="content">
      
sub contents 1              
      
sub contents 2
   

این مثال چندین انتخابگر مقدار دلخواه را ترکیب می کند:

• [&>*]:p-4 بالشتک را به همه کودکان مستقیم اضافه می کند.
• [&>*]:mb-2 حاشیه-پایین را به همه فرزندان مستقیم اضافه می کند.
• [&>.content]:bg-blue-100 یک پس‌زمینه آبی روشن را فقط برای بخش «محتوا» اعمال می‌کند.

مثال عملی

بیایید یک پاورقی با ستون های متعدد، پیوندهای رسانه های اجتماعی و یک فرم ثبت نام در خبرنامه ایجاد کنیم. از دستور مقدار دلخواه برای استایل دادن به فرزندان مستقیم ظرف پاورقی خود استفاده خواهیم کرد.

![https://imgur.com/B6XHhRx.png]

در این مثال، ما از چندین نمونه از دستور مقدار دلخواه برای استایل دادن به پاورقی خود استفاده کرده‌ایم:

1. برای ظرف اصلی:

   • [&>div]:mb-8: حاشیه-پایین را به همه div های فرزند مستقیم اضافه می کند.
   • [&>div:last-child]:mb-0: حاشیه-پایین را از آخرین تقسیم فرزند حذف می کند.
   • md:[&>div]:mb-0: حاشیه-پایین را از همه div های فرزند در صفحه های متوسط ​​و بالاتر حذف می کند.

2. برای بخش اطلاعات شرکت:

   • [&>a]:text-blue-400: همه پیوندهای مستقیم فرزند را آبی می کند.
   • [&>a]:hover:underline: روی پیوندها در حالت شناور خط می کشد.

3. برای بخش پیوندهای سریع:

   • [&>li]:mb-2: حاشیه-پایین را به همه موارد لیست اضافه می کند.
   • [&>li>a]:text-gray-300: رنگ متن پیوندهای موجود در لیست را تنظیم می کند.
   • [&>li>a]:hover:text-white: رنگ پیوند را در شناور تغییر می دهد.
   • [&>li>a]:transition-colors: یک جلوه انتقال صاف برای تغییرات رنگ اضافه می کند.

4. برای بخش رسانه های اجتماعی:

   • [&>a]:mr-4: حاشیه سمت راست را به همه پیوندها اضافه می کند.
   • [&>a]:text-2xl: اندازه فونت را برای نمادهای اجتماعی تنظیم می کند.
   • [&>a]:text-gray-300: رنگ اولیه را برای نمادهای اجتماعی تنظیم می کند.
   • [&>a]:hover:text-white: رنگ نماد را در حالت شناور تغییر می دهد.

5. برای فرم خبرنامه:

   • [&>*]:mb-2: حاشیه-پایین را به همه فرزندان مستقیم فرم اضافه می کند.
   • [&>*:last-child]:mb-0: حاشیه-پایین را از آخرین فرزند فرم حذف می کند.

نتیجه

نحو ارزش دلخواه Tailwind CSS v3 یک راه قدرتمند و انعطاف پذیر برای هدف قرار دادن و استایل مستقیم فرزندان یک عنصر را فراهم می کند. این رویکرد به شما امکان می دهد:

1. استایل ها را برای همه کودکان مستقیم استفاده کنید [&>*]:{class}.
2. با استفاده از انتخابگرهای کلاس یا عنصر مانند کودکان مستقیم خاص را هدف قرار دهید [&>.classname]:{class} یا [&>element]:{class}.
3. چند انتخابگر را برای نیازهای یک ظاهر طراحی پیچیده تر ترکیب کنید.

اگر به دنبال بهبود فرآیند توسعه Tailwind CSS خود هستید، Tails by DevDojo را بررسی کنید. این صفحه ساز قدرتمند به شما این امکان را می دهد که به صورت بصری وب سایت های Tailwind CSS پاسخگو و خیره کننده را با سهولت کشیدن و رها کردن ایجاد کنید و آن را به یک ابزار عالی برای مبتدیان و توسعه دهندگان با تجربه تبدیل می کند.

کد نویسی مبارک!