جلسه 5 آموزش CSS: انتخابگرها یا Selectors در CSS (بخش دوم)

جلسه 5 آموزش CSS: انتخابگرها یا Selectors در CSS (بخش دوم)

سلام به رفیقِ گلِ رایا وردپرسی خودم! 🌸✨امروز حالِت چطوره؟ 😄 امیدوارم پر از انرژی مثبت باشی 🙃

یادت میاد توی جلسه قبل چطور با کلاس‌ها و آی‌دی‌ها المان‌ها رو انتخاب می‌کردیم؟ خب، امروز می‌خوایم یه قدم جلوتر بریم! تو بخش دوم سلکتورها، قراره با مباحث پیشرفته‌تر آشنا بشی؛ از حالت‌های خاص المان‌ها مثل هاور و فوکوس گرفته تا استایل دادن به اولین حرف یک پاراگراف و حتی انتخاب المان‌ها براساس ویژگی‌هایشون!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

اینجا می‌بینی که CSS چطور میتونه طراحی و تجربه کاربری وبت رو یه عالمه بهبود بده. آماده‌ای؟ پس بیا با هم این دنیای جذاب رو بیشتر کشف کنیم! 🔥

شبه‌ کلاس‌ ها (Pseudo-classes) 🔄

شبه‌کلاس‌ها یکی از قدرتمندترین انتخابگرهای CSS هستن که بهت اجازه میدن به راحتی برای حالت‌های مختلف یه المان استایل تعیین کنی. مثلاً وقتی ماوس روی یه دکمه میره یا بعد از کلیک کاربر، استایلش تغییر کنه و حس تعاملی فوق‌العاده‌ای ایجاد بشه. بدون شک، شبه‌کلاس‌ها ابزار جادویی هستن که با فقط یه دونقطه (:) شروع میشن. 😎✨

📍حالت‌ های مختلف شبه‌ کلاس (مرتبط با لینک ها) در CSS

شبه‌کلاس‌ها می‌تونن حالت‌های مختلفی داشته باشن که هر کدوم یک وضعیت خاص از المان رو انتخاب می‌کنن:

• حالت عادی (Default) : وقتی المان هنوز هیچ تعاملی با کاربر نداشته و توی حالت پیش‌فرض خودش قرار داره.
• حالت :hover وقتی کاربر ماوسش رو روی المان می‌بره و می‌فهمه که می‌تونه باهاش تعامل داشته باشه.
• حالت :active همون لحظه‌ای که کاربر روی المان کلیک می‌کنه، یه تغییر استایل در زمان کوتاه اتفاق میفته.
• حالت :visited وقتی کاربر قبلاً روی یه لینک کلیک کرده و اون صفحه رو دیده، این حالت فعال میشه.
• حالت :focus وقتی یه المان (مثل یه فیلد ورودی) فوکوس میشه، یعنی کاربر داخلش کلیک کرده.

✨ با استفاده از شبه‌کلاس‌ها، تو می‌تونی برای هرکدوم از این حالت‌ها استایل‌های متفاوتی تعریف کنی. این باعث میشه سایتت زنده و پویا به نظر برسه و کاربر حس کنه که سایت به کارهاش واکنش نشون میده! 💡🔥

1️⃣ حالت عادی (Default)

این همون استایل پیش‌فرض یه المانه، یعنی وقتی هنوز هیچ تعاملی باهاش انجام نشده. تا زمانی که کاربر ماوسش رو روی المان نبره، روش کلیک نکنه یا انتخابش نکنه، این استایل‌ها اعمال میشن:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا: دکمه تا وقتی که کاربر باهاش تعامل نداشته باشه، همون رنگ سفید و بکگراند آبی (استایل اولیه) رو داره.

2️⃣ حالت هاور (hover)

حالت هاور وقتی فعال میشه که کاربر ماوس رو روی یه المان ببره، بدون اینکه کلیک کنه. این ویژگی به کاربر نشون میده که المان تعاملیه و ممکنه اتفاق خاصی بیفته، مثل تغییر رنگ، نمایش یه افکت یا ….

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا: وقتی ماوس روی دکمه میره، رنگ پس زمینه دکمه مشکی میشه تا حس تعامل بهتری بده.

3️⃣ حالت اکتیو (active)

🖱 این حالت زمانیکه که کاربر روی یه المان کلیک می‌کنه، فعال میشه و تا وقتی که کلیک چپ ماوس رو نگه داشته باقی می‌مونه. اما به‌محض اینکه کلیک رو رها کنه، استایل دوباره به حالت عادی برمی‌گرده. ⏳✨ این ویژگی برای دادن بازخورد لحظه‌ای به کاربر خیلی کاربردیه!

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در کد بالا: وقتی روی دکمه کلیک می‌کنی، رنگ پس‌زمینه‌ اش مشکی میشه و این تغییر فقط تا زمانی که دستت روی ماوس و کلیک نگه داشته باشی باقی می‌مونه. به محض اینکه کلیک رو رها کنی، رنگ به حالت عادی برمی‌گرده.

4️⃣ حالت ویزیتد (visited)

این حالت فقط برای لینک‌ها کاربرد داره و زمانی فعال میشه که کاربر قبلاً روی اون لینک کلیک کرده و به صفحه مقصد رفته. این کمک می‌کنه تا کاربر بدونه کدوم لینک‌ها رو قبلاً بازدید کرده. یه مثال عالی از این حالت رو می‌تونی توی صفحه‌ی نتایج جستجوی گوگل ببینی، جایی که لینک‌هایی که قبلاً بازدید کردی معمولاً به رنگ بنفش درمیاد و لینک‌های جدید هنوز آبی هستن.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا: لینک‌های بازدید شده با رنگ بنفش نمایش داده میشن 🙂

5️⃣ حالت فوکوس (focus)

این حالت زمانی فعال میشه که کاربر با کیبورد به یه المان (مثل فیلد وارد کردن متن) توجه می‌کنه. مثلاً وقتی کاربر با کلید Tab بین فیلدهای فرم جابجا میشه یا وقتی تو یه فیلد input کلیک می‌کنه و امکان وارد کردن متن رو پیدا می‌کنه. این حالت به کاربر نشون میده که اون المان آماده دریافت ورودی از کیبورد هست و معمولاً با تغییر استایل مثل حاشیه یا رنگ همراهه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا: زمانی که فیلد ورودی (input) فوکوس میشه، رنگ حاشیه (border) اون به آبی تغییر میکنه.

شبه کلاس های مرتبط با فرم ها

از اونجایی که فرم‌ها جزو قسمت‌های تعاملی هر صفحه هستن، با استفاده از شبه‌کلاس‌ها می‌تونی تجربه کاربری خیلی بهتری بسازی. اینجا می‌خوایم درباره شبه‌کلاس‌هایی صحبت کنیم که مخصوص فرم‌ها و ورودی‌های کاربری هستن. 📝

1️⃣ :focus 👈 وقتی کاربر روی فیلد کلیک می‌کنه یا بهش فوکوس میده

این شبه‌کلاس وقتی فعال میشه که کاربر روی یه فیلد ورودی کلیک می‌کنه یا با استفاده از کلید Tab به اون میره. مثلاً وقتی کاربر به یه فیلد در فرم میره، می‌تونی رنگ اون رو تغییر بدی تا مشخص بشه کاربر داخل کدوم فیلد هست.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه وقتی کاربر به فیلد ورودی فوکوس میده، رنگ حاشیه به آبی و پس‌زمینه به رنگ آبی کمرنگ تغییر کنه. 👀💡

2️⃣ :valid و :invalid 👈 وقتی کاربر اطلاعات درست یا اشتباه وارد می‌کنه

این شبه‌کلاس‌ها بهت کمک می‌کنن تا به المان‌های ورودی فرمت استایل بدی، بسته به اینکه داده‌ها درست وارد بشن یا نه. مثلاً وقتی کاربر یه ایمیل معتبر وارد کنه، شبه‌کلاس :valid فعال میشه و اگه ایمیل اشتباه باشه، :invalid فعال میشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه وقتی ایمیل وارد شده معتبر باشه، حاشیه فیلد سبز بشه و اگر اشتباه باشه قرمز بشه. 🟢🔴

3️⃣ :checked 👈 برای المان‌ های انتخابی (چک‌ باکس و رادیو)

این شبه‌کلاس وقتی کاربرد داره که چک‌باکس یا دکمه رادیویی انتخاب شده باشه. خیلی به درد می‌خوره وقتی می‌خوای به گزینه‌های انتخابی استایل خاصی بدی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

با این کد وقتی چک‌باکس انتخاب بشه، پس‌زمینه‌اش به سبز تغییر میکنه. ✅🌿

4️⃣ :disabled 👈 وقتی المان غیرفعاله

این شبه‌کلاس وقتی فعال میشه که یه فیلد ورودی غیرفعال باشه. مثلاً وقتی یک فیلد در فرم برای کاربر غیرقابل استفاده باشه، می‌تونی استایل خاصی بهش بدی که به کاربر نشون بده این فیلد فعال نیست.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه وقتی یه فیلد ورودی غیرفعال بشه، رنگ پس‌زمینه‌اش خاکی و متنش رنگ خاکستری بشه. 🔒

5️⃣ :required و :optional 👈 برای فیلدهای اجباری و اختیاری

این شبه‌کلاس‌ها بهت این امکان رو میدن که استایل‌های خاصی به فیلدهای اجباری یا اختیاری بدی. برای فیلدهای اجباری، می‌تونی استایل ویژه‌ای برای جلب توجه کاربر داشته باشی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه فیلدهای اجباری حاشیه قرمز و فیلدهای اختیاری حاشیه سبز داشته باشن. 🚨✔

شبه‌کلاس‌ های مرتبط با موقعیت المان‌ها

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

1️⃣ :first-child 👈 اولین فرزند

این شبه‌کلاس به اولین المانی که داخل یک والد قرار داره استایل میده.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه که اولین آیتم از لیست <ul> پررنگ (bold) بشه. 🤩

2️⃣ :last-child 👈 آخرین فرزند

این شبه‌کلاس به آخرین المان در یک گروه والد استایل میده.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

با این کد، آخرین آیتم از لیست <ul> رنگ قرمز می‌گیره. 🔴

3️⃣ :nth-child(n) 👈 انتخاب بر اساس موقعیت خاص

این انتخابگر که از نوع شبه‌کلاسه، بهت این امکان رو می‌ده که المان‌ها رو براساس موقعیتشون در بین فرزندان یک والد انتخاب کنی. یعنی می‌تونی از هر نوع المانی که بخوای استفاده کنی، فقط موقعیتشون مهمه! 😎

این انتخابگر، عنصری رو انتخاب می‌کنه که فرزند n-ام والد خودش باشه. پارامتر n می‌تونه یک عدد، یک فرمول، یا حتی کلمات خاص باشه. این انتخابگر بدون توجه به نوع المان، فقط به موقعیتش نگاه می‌کنه.

مثال‌ها:

• :nth-child(3) – سومین فرزند رو انتخاب می‌کنه.
• :nth-child(2n) یا :nth-child(even) – فرزندان زوج (مثل دوم، چهارم، ششم و…) رو انتخاب می‌کنه.
• :nth-child(2n+1) یا :nth-child(odd) – فرزندان فرد (مثل اول، سوم، پنجم و…) رو انتخاب می‌کنه.
• :nth-child(n+3) – از فرزند سوم به بعد رو انتخاب می‌کنه.

با این انتخابگر می‌تونی استایل‌های مختلفی به هر آیتم از لیست‌ها یا هر گروهی از المان‌ها بدی! 😎🎨

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در اینجا، سومین آیتم از لیست پس‌زمینه اش زرد میشه. 💛

4️⃣ :nth-last-child(n) 👈 انتخاب از آخر

این شبه‌کلاس هم مشابه nth-child هست، اما از انتهای لیست شروع می‌کنه. مثلاً، پنجمین آیتم از آخر رو استایل می‌ده.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه پنجمین آیتم از آخر لیست رنگ آبی بگیره. 💙

شبه‌ المنت‌ها (Pseudo-elements) ✨

شبه‌ المنت‌ها یه کم متفاوت‌تر از شبه‌کلاس‌ها هستن. شبه المنت ها، بهت این امکان رو میدن که استایل‌های خاصی رو فقط به بخش‌هایی از یک المان اضافه کنی، مثل اولین حرف یا اولین خط پاراگراف، بدون اینکه نیاز باشه استایل‌های کلی رو تغییر بدی. خیلی جالبه، نه؟

شبه‌ المنت‌ها (pseudo-elements) معمولاً با 2 تا دو نقطه (::) نوشته می‌شن:

1️⃣ ::first-letter (اولین حرف)

با این شبه‌المنت می‌تونی اولین حرف یه پاراگراف رو استایل بدی، مثلاً بزرگ و رنگی کنی. این کار باعث میشه توجه کاربر به اولین حرف جلب بشه. 😎

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثالا بالا: اولین حرف پاراگراف بزرگ‌تر میشه و رنگش به رنگ نارنجی (#ff9f43) تغییر کنه.

2️⃣ ::first-line (اولین خط)

برای استایل دادن به اولین خط از یک پاراگراف، می‌تونی از ::first-line استفاده کنی. مثلاً:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

با این کد، اولین خط پاراگراف به صورت برجسته و با رنگ آبی نمایش داده میشه.

3️⃣  ::before  و  ::after  (اضافه کردن محتوا)

با استفاده از ::before و ::after می‌تونی محتوای جدید قبل یا بعد از یک المان اضافه کنی. مثلاً برای اضافه کردن یک متن یا علامت خاص در کنار المان‌ها:

• ::before محتوای جدید رو قبل از محتوای اصلی المان اضافه می‌کنه.
• ::after محتوای جدید رو بعد از محتوای اصلی المان اضافه می‌کنه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، وقتی ماوس رو روی یه المان با کلاس tooltip ببری، یه پیام راهنما با پس‌زمینه تیره و متن سفید ظاهر میشه. 🎉 این تکنیک خیلی برای اضافه کردن توضیحات یا تغییرات جزئی به المان‌ها مفیده و می‌تونی محتوای دلخواه رو بدون نیاز به تغییر HTML اضافه کنی.

👈انتخاب کننده های Attribute: انتخاب المان ها براساس  ویژگی ها 

انتخاب‌کننده‌های Attribute بهت اجازه میدن تا المان‌ها رو براساس ویژگی‌هایی مثل type، href، title و… انتخاب کنی. این روش فوق‌العاده کارآمده وقتی می‌خوای به المان‌هایی استایل بدی که ویژگی مشترکی دارن، بدون نیاز به اضافه کردن کلاس یا آی‌دی. 😎

چرا از انتخاب‌کننده‌های Attribute استفاده می‌کنیم؟

• انعطاف‌پذیری: می‌تونی به المان‌هایی که ویژگی مشخصی دارن استایل بدی.
• سازمان‌دهی بهتر: کدهای CSS تمیزتر و قابل نگهداری‌تر میشن.
• کاربردهای متنوع: از انتخاب المان‌های فرم تا لینک‌های خاص.

مثال‌های کاربردی:

1️⃣ انتخاب المان‌های ورودی با ویژگی type="text"
اگر می‌خوای همه فیلدهای متنی رو استایل بدی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه تمام <input>هایی که type="text" دارن، استایل یکسان و زیبا دریافت کنن. ✨

2️⃣ انتخاب لینک‌ها بر اساس ویژگی href
فرض کن می‌خوای لینک‌هایی که حاوی کلمه “example” در آدرسشون هستند رو استایل بدی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این کد:

• *= به معنی “شامل” هست.
• همه لینک‌هایی که آدرسشون شامل “example” هست، رنگ قرمز می‌گیرن و زیرخط‌دار میشن. 🔗

3️⃣ انتخاب المان‌ها با ویژگی‌های خاص
مثلاً، اگر می‌خوای المان‌هایی که ویژگی data-active="true" دارن رو انتخاب کنی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

این کد باعث میشه تمام <div>هایی که data-active برابر با “true” دارن، پس‌زمینه سبز و متن سفید بگیرن. 🎉

یشن که کنترل دقیق‌تری روی انتخاب المان‌ها داشته باشی و استایل‌دهی به سایتت بهینه‌تر بشه. 🚀

💡 نکته: می‌تونی از عملگرهای مختلفی در انتخاب‌کننده‌ های Attribute استفاده کنی:

• = : برابر با
• *= : شامل
• ^= : شروع با
• $= : پایان با

این ابزارها باعث میشن که کنترل دقیق‌تری روی انتخاب المان‌ها داشته باشی و استایل‌دهی به سایتت بهینه‌تر بشه.

انتخاب کننده های ترکیبی

انتخابگرهای ترکیبی یا Combinators در CSS بهت این امکان رو میدن که المان‌ها رو براساس رابطه‌ای که بینشون هست انتخاب کنی. یعنی به‌جای اینکه فقط یک المان رو انتخاب کنی، می‌تونی مشخص کنی که یک المان خاص چطور با یه المان دیگه رابطه داره.

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

 1️⃣ فاصله خالی (Descendant Combinator) ➡️ “همه فرزندان و نوه ها”

این ساده ترین انتخابگر ترکیبی هست. با یه  فاصله خالی بین دو انتخابگر، همه المان های فرزند (حتی نوه ها و نتیجه ها!) رو انتخاب میکنی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا، هر p که داخل یه div باشه (حتی اگر داخل چندین لایه از divها هم قرار گرفته باشه)، رنگ آبی می‌گیره.

2️⃣ علامت >   (Child Combinator) ➡️ “فقط فرزندان مستقیم”

با این انتخابگر می‌تونی انتخاب کنی که یک المان باید فرزند مستقیم یه المان دیگه باشه. یعنی فقط وقتی یه المان دقیقاً زیر المان دیگه قرار داره این استایل اعمال بشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، فقط liهایی که به‌طور مستقیم داخل ul هستن رنگ قرمز می‌گیرن. اگر li درون یه ul دیگه باشه (مثل درون یه div) رنگ قرمز نمی‌گیره.

3️⃣علامت  + (Adjacent Sibling Combinator) ➡️ “همسایه مجاور”

با این انتخابگر می‌تونی المانی رو انتخاب کنی که دقیقاً بلافاصله بعد از یه المان دیگه قرار داشته باشه. یعنی یه المان باید هم‌سایه المان دیگه باشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا، اولین p که بعد از h2 میاد، فونت سایز 18px می‌گیره.

4️⃣ علامت  ~ (General Sibling Combinator) ➡️ “همه همسایه ها”

این یکی همه المان هایی رو انتخاب میکنه که  بعد  از یه المان دیگه بیان، حتی اگر همسایه ی مستقیم نباشن!

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا، تمام pهایی که بعد از یه h2 بیان (حتی اگر توی یه لایه دیگه از divها هم باشن)، رنگ سبز می‌گیرن.

سخن پایانی

رفیق، تو این جلسه با مباحث پیشرفته‌ تر سلکتورها (selectors) آشنا شدی؛ از شبه‌کلاس‌ها و شبه‌المنت‌ها تا انتخاب‌کننده‌های Attribute و ترکیبی.💻

یادت باشه که با استفاده از این انتخابگرها، کنترل کامل روی هر المان از صفحه داری😄

اگه سوالی داشتی یا نیاز به توضیحات بیشتری بود، حتماً توی نظرات بگو. ضمنان منتظر بخش بعدی آموزش‌های CSS هم باش و تمرین کردن نکات و مثال هایی که میگم هم یادت نره 🌟✨ فعلن تا بعد