بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

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

مقالات طراحی سایت

سلکتور empty چیست و برای چه مواردی در طراحی با css کاربرد دارد ؟ صفرتاصد نکات مربوط به انتخابگر empty در css

0 11
آموزش سلکتور 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 را در صفحه انتخاب کنید که داخل آنها هیچ تگ دیگری وجود ندارد که با این روش می‌توان بسادگی تمامی آنها را انتخاب کرد .

این انتخاب کننده با ویژگی Full Support در تمامی مروگرهای قدیمی نیز فعال است و لذا می‌توانید با خیال راحت در پروژه های طراحی سایت خودتان از آن استفاده کنید .

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

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

سلکتور first-letter در پروژه های طراحی سایت چه نقشی دارد ؟ چگونه از این انتخاب کننده به درستی در پروژه های طراحی سایت استفاده کنیم ؟

0 9

امروزه قالب های آماده بسیار در حال توسعه و افزایش فروش هستند . آیا طراحی سایت با قالب های آماده میتواند روش خوبی برای ساخت سایت ، جذب مشتری و یا اجرای پروژه های پیشرفته باشد ؟ در این مقاله همراه ما باشید .

1 1,968
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود