آیا تا به حال در مورد انتخابگر جغد لوبوتومی شده در CSS شنیده اید؟ علیرغم اینکه یک انتخابگر کمتر شناخته شده است، گاهی اوقات می تواند ابزار مفیدی در توسعه وب باشد. بیایید این انتخابگر را به طور عمیق مورد بحث قرار دهیم.
این مقاله را در وبلاگ من بخوانید
درک انتخابگر جغد
انتخابگر جغد که به ما امکان می دهد سبک ها را برای هر و همه عناصری که خواهر و برادر مجاور دارند و از آنها پیروی می کنند اعمال کنیم. انتخابگر به شکل زیر است:
* + * {
padding-top: 15px;
}
را * انتخابگر جهانی است که به ما امکان می دهد تمام عناصر موجود در DOM را انتخاب کنیم و به آنها استایل دهیم. را + ترکیب‌کننده خواهر و برادر مجاور است و برای انتخاب خواهر و برادر بعدی یک عنصر استفاده می‌شود، مشروط بر اینکه هر دو عنصر والد یکسانی داشته باشند. به عنوان مثال، در نشانه گذاری زیر:
<div class="parent">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
پاراگراف بلافاصله بعد از h1 می آید. بنابراین، ما می توانیم این تگ پاراگراف را به صورت زیر انتخاب کنیم:
/* Paragraphs that come immediately after the heading */
h1 + p {
color: red;
}
به بیان ساده، انتخابگر جغد سبک‌هایی را برای همه عناصر موجود در سند اعمال می‌کند که عناصر دیگر را دنبال می‌کنند، مشروط بر اینکه در یک سطح باشند. تصویر زیر ممکن است به روشن شدن این مفهوم کمک کند:
در تصویر بالا، هر سه عنصر در یک سطح هستند (المان والد یکسانی دارند). عنصر دوم و سوم یک خواهر و برادر قبلی دارند. با این حال اولین عنصر خواهر یا برادر قبلی ندارد بنابراین انتخاب نخواهد شد.
استفاده
یکی از رایج ترین موارد استفاده برای این انتخابگر، افزودن فاصله بین بخش ها و پاراگراف ها در وب سایت های وبلاگ/محتوا است. به عنوان مثال، اضافه کردن padding یا حاشیه بین پاراگراف ها. روش های سنتی تقریباً همیشه اثرات ناخواسته ای برای این مورد استفاده دارند (به عنوان مثال، اضافه کردن فاصله بعد از آخرین عنصر یا بالاتر از عنصر اول).
این در اینجا نشان داده شده است:
مثال بالا را می توان به صورت زیر کدگذاری کرد:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent > * + * {
margin-top: 1.5em;
}
.child {
width: 150px;
height: 50px;
background: red;
}
سایر موارد استفاده ممکن می تواند شامل موارد زیر باشد:
- یک استایل را فقط زمانی به یک عنصر اعمال کنید که بعد از عنصر دیگری در صفحه آمده باشد.
- مقداری فاصله بین سطرها در جدول اضافه کنید.
چیدمان های تو در تو
یکی دیگر از ویژگی های مفید این است که انتخابگر جغد به خوبی با عناصر تو در تو کار می کند، همانطور که در زیر نشان داده شده است:
امیدوارم امروز چیز جدیدی در مورد CSS یاد گرفته باشید!
این مقاله را در وبلاگ من بررسی کنید
ممنون که خواندید
