آموزش سلکتور empty: در css

در سری مقالات قبلی دررابطه با سلکتورهای بسیاری صحبت کردیم که در طراحی با زبان css دارای کاربرد بجا و مناسبی هستند . همانطور که قبلا و در طی مقالات پیرامون سلکتورهای css اشاره کردیم ، شناخت این نوع انتخاب کننده‌ها به طراح کمک خواهد کرد تا بتوانند بخوبی روی پروژه‌های خودشان کار کنند و از سختی های مسیر خود بکاهند . در نمونه هایی همچون سلکتور های backdrop که مقاله آن را قبلا منتشر کرده‌ایم ، متوجه شدید که می‌توان اکثر قسمت هایی که حتی فکرشان هم نمی‌کنید توسط css به راحتی تغییر داد و شما از وجود این نوع انتخاب کننده‌ها بی خبر هستید .

تمام انتخاب کننده های css محدود به کلاس و آیدی نیست و css دنیایی از انتخاب کننده‌ها دارد که البته ، این شخص طراح است که تصمیم خواهد گرفت در چه بخشی از چه انتخاب کننده‌هایی استفاده کند و صرفا شناخت این موارد مسبب تبدیل شدن شما به یک طراح ماهر نخواهد شد و باید بخوبی نحوه کار هریک از این آیتم‌ها را درک کرده و به شکلی بسیار بهینه کدنویسی کنید . انتخاب کننده empty نیز یکی از انتخاب کننده های جذاب است که می‌تواند بسته به نوع پروژه و شرایط ایجاد سلکت در بین تگ‌های پروژه ، به شما کمک کند .

سلکتور empty چیست و چه کاربردی دارد ؟

اگر با زبان طراحی سی اس اس آشنایی دارید حتما اطلاع دارید که برخی انتخاب کننده‌ها در ابتدای خود با علامت : و برخی دیگر نیز با علامت :: استفاده می‌شوند . انتخاب کننده empty یکی از انتخاب کننده هایی است که با : شناخته می‌شود و یک وظیفه جذاب در سایت شما ایفا می‌کند . زمانی که شما در زبان html کدنویسی می‌کنید ، در بسیاری از بخش های سایت لازم است تا از المان های تودرتو استفاده کنید . برای مثال نمونه زیر :

<div class="">
	<p>Lorem Text Here <span>seo90</span></p>
</div>

در این بخش یک تگ div داریم که داخل آن یک تگ p وجود دارد و داخل تگ p نیز یک تگ span داریم . اکنون برای اینکه تگ span را انتخاب کنیم بصورت زیر کدنویسی می‌کنیم که البته بسته به شرایط ممکن است در دو حالت انجام شود :

div p span {}
div > p > span {}

اکنون تصور کنید که کد html شما به شکل زیر تغییر کرده باشد :

<div class="">
	<p>lorem text</p>
	<p>lorem text in <span>span tag</span></p>
	<p>lorem text</p>
</div>

در این کد 3 تگ p وجود دارد که یکی از این تگ های p در داخل خود یک تگ span دارد و دو تگ p دیگر در داخل خود هیچ آیتم دیگری ندارند و داخل آنها خالی است و صرفا متن داریم ! اکنون برای اینکه دو تگ p که در داخل آنها صرفا متن قرار دارد و هیچ تگ دیگری داخل آنها نیست را انتخاب کنیم تا به آنها استایل دهیم باید به شکل زیر عمل کنیم :

div p:empty{
	color:#717171;
}

در این کد به تگ های p داخل div مدنظر اشاره کردیم که با شرط empty قرار گرفته‌اند به عبارتی هیچ تگ دیگری در داخل این تگ های p وجود نداشته و داخل آن خالی بوده یا صرفا متن وجود داشته باشد . پس در این شرایط و با بررسی  و اعمال شرط empty ، تگ هایی انتخاب می‌شوند که داخل آنها هیچ تگی وجود ندارد یا تنها متن وجود دارد .

کاربرد اصلی این سلکتور برای بخش هایی است که آیتم های مشابه در صفحه بسیار زیاد است و شما قصد دارید تا برای مثال تمامی تگ های li را در صفحه انتخاب کنید که داخل آنها هیچ تگ دیگری وجود ندارد که با این روش می‌توان بسادگی تمامی آنها را انتخاب کرد .

بگذریم از این موضوع که می‌توان از این روش برای شناسایی در صفحات وب نیز استفاده کرد و تگ های خاصی را با مقاصد خاص هدف قرار دارد که این کار در دسته ترفندهای طراحان حرفه‌ای قرار دارد اما جالب است که با وجود این نوع انتخاب کننده ها و نحوه کار آنها آشنایی داشته باشید چراکه درصورت نبود اینگونه انتخاب کننده‌ها و برای انتحاب تگ های بدون محتوا باید تمامی تگ های والد را یک به یک انتخاب کرده و المان های داخل آنها را بررسی کنید که البته در بهترین حالت ممکن است این کار توسط جاوا اسکریپت انجام شود و تا زمانی که زبان طراحی css این امکانات را در اختیار شما قرار داده است می‌توان بسادگی از آنها استفاده کرده و به مقاصد خود رسید . سایر مقالات مربوط به حوزه css را می‌توانید در قسمت دسته بندی مربوط به ” مقالات طراحی سایت ” مطالعه کنید . پاینده باشید .