💎 شبه‌کلاس root در CSS 💎

شبه‌کلاس root در CSS به عنصر ریشه (یا بالاترین عنصر) در سند HTML اشاره می‌کنه. این شبه‌کلاس یکی از اجزای کلیدی CSS به شمار می‌ره، به‌ویژه وقتی که از متغیرهای CSS ( نمونه استفاده ازش رو در پست های قبلی داشتیم ) استفاده می‌کنیم.

اولویت ( priority ) در :root به چه شکله ؟ 🚀

شبه‌کلاس هایی مثل hover ,focus و root نسبت به انتخابگرهای تگ ( مثل div یا html ) اولویت بیشتری دارن.

یعنی اگر استایل یکسانی هم در انتخابگر تگ و هم در شبه‌کلاس :root تعریف کنید، استایل :root اعمال خواهد شد 🔻

:root {
  --bg-color: lightblue;
}

html {
  --bg-color: pink;
}

body {
  background-color: var(--bg-color); /* پس‌زمینه آبی روشن خواهد بود */
}

تعاملش با جاوااسکریپت چطوره ؟ 💥

جاوااسکریپت به خوبی این مورد رو هندل کرده و شما میتونید متغیرهای تعریف‌شده در :root رو با جاوااسکریپت به صورت داینامیک تغییر بدید، مثل تغییر تم وبسایت.

مثال :

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

توی کد بالا، مقدار متغیر --primary-color به #e74c3c تغییر می‌کنه، و تمام عناصری که از این متغیر استفاده می‌کردند، به روز می‌شن.

امیدوارم حسابی از این پست لذت برده باشی، اگر دوست داشتید با ری‌اکشناتون بهمون انرژی بدید ❤️

#️⃣ #css #root

🚀 @coolycode