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

سلام رفیق رایا وردپرسی خودم. چطوری؟🙃 امیدوارم تعطیلات عید حسابی بهت خوش گذشته باشه🎉 امروز قراره با هم به دنیای جذاب انتخابگرها (Selectors) در CSS سفر کنیم.

توی این جلسه می‌خوام بهت نشون بدم چطور با استفاده از انتخابگر (سلکتور) CSS، به راحتی اون المان مدنظرت رو انتخاب کنی و بهش استایل بدی. انتخابگرها بهت این قدرت رو میدن که به هر بخش از صفحه‌ ات با دقت و هوشمندی استایل بدی. پس بیا دست به کار بشیم و با هم دنیای جذاب انتخابگرها رو بیشتر بشناسیم! 😉🥰

✅ انتخابگرها یا Selectors در CSS

انتخابگرها (Selectors) در CSS ابزارهایی هستن که بهمون کمک میکنن تا المان‌های مختلف HTML رو برای استایل دادن انتخاب کنیم. تصور کن که داری با یک گروه از دانش‌آموزان حرف می‌زنی – گاهی می‌خوای با همه صحبت کنی، گاهی فقط با دانش‌آموزهای تنبل 😬، گاهی فقط با نفر اول هر ردیف و گاهی هم فقط با شخص خاصی به نام سعید! 😄 این دقیقاً همون کاریه که انتخابگرها انجام میدن.

یک انتخابگر (Selector) ساده‌ترین نوع دستور CSS هست که به مرورگر میگه: ” من می‌خوام این استایل‌ها رو به این المان خاص اعمال کنی!”

×

جلسه 16 آموزش CSS: تصاویر (Images) در CSS

مطالعه

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

ساختار کلی دستورات CSS همونطور که در جلسه قبلی (سوم) گفتم به این شکله:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در این مثال، p انتخابگر ماست که به مرورگر میگه: تمام پاراگراف‌ها رو آبی کن و اندازه متنشون رو 16 پیکسل قرار بده.

 🤔انواع انتخابگر در CSS

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

×

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه

1. انتخابگر تگ
2. انتخابگر آی‌دی (id)
3. انتخابگر کلاس (class)
4. انتخابگر تگ با ID خاص
5. انتخابگر تگ با Class خاص
6. انتخابگر گروهی
7. انتخابگر کل یا انتخابگر تمامی تگ‌ها

1️⃣ انتخابگر تگ یا عنصر (Element Selector) 

ساده ترین نوع انتخابگر، انتخابگر تگ یا عنصره . کافیه اسم تگ HTML رو بنویسی و استایل ها رو بهش اختصاص بدی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این کد به همه ی تگ های <p> (پاراگراف ها) استایل آبی و سایز 16پیکسل میده.

2️⃣  انتخابگر آی دی یا ID (ID Selector) 

اگه بخوای فقط یه المان خاص رو هدف قرار بدی و بهش استایل بدی، انتخابگر آی‌دی بهترین گزینه‌ست. فقط یادت باشه که هر ID توی صفحه HTML باید منحصر به فرد باشه و فقط یک بار استفاده بشه. برای انتخاب المانی که آی‌دی داره، از علامت (هشتگ) # قبل از نام آی‌دی استفاده کن. به این ترتیب، دقیقاً اون المان مورد نظرت رو انتخاب میشه و میتونی بهش استایل مدنظرت رو بدی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

⚠️ توجه: آی دی مثل کد ملی هست؛ فقط برای یک نفر (عنصر) استفاده میشه! در مثال بالا فقط المان با آی‌دی header رنگ پس زمینه اش زرد میشه و فاصله داخلی 20 پیکسلی از طرفین براش اعمال میشه.

3️⃣ انتخابگر کلاس یا Class (Class Selector)

انتخابگر کلاس وقتی به کار میره که بخوای چند المان با ویژگی مشترک رو انتخاب کنی. برخلاف آی‌دی که فقط برای یه المان منحصر به فرده، انتخابگر کلاس رو می‌تونی برای چندین المان استفاده کنی. برای انتخاب اون‌ها از نقطه (.) قبل از نام کلاس استفاده کن. به این صورت، می‌تونی استایلی یکتا و دلنشین به گروهی از المان‌ها بدی:

×

جلسه 20 آموزش CSS: فرم (form) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در این مثال، هر المانی که کلاس highlight داشته باشه، پس‌زمینه‌ش زرد میشه و متنش ضخیم میشه. اینکار میدونی عین چی میمونه عین اینکه تو مربی تیم فوتبالی و داری با تمام اعضای تیم که مشترک هستن و زیر پرچم یه کشور به نام مثلا ایران، فوتبال بازی میکنن صحبت میکنی ⚽

4️⃣ انتخابگر تگ با ID خاص

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این انتخابگر فقط پاراگرافی که id="intro" داره رو انتخاب می‌کنه، نه هر المانی با این ID رو.

×

جلسه 23 آموزش CSS: نحوه اولویت بندی عناصر در CSS

مطالعه

5️⃣ انتخابگر تگ با Class خاص

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این انتخابگر فقط پاراگراف‌هایی که کلاس error دارن رو انتخاب می‌کنه، نه هر المانی با این کلاس رو.

6️⃣ انتخابگر گروهی

اگه بخوای برای چندین تگ، کلاس یا حتی آی‌دی مختلف به‌طور هم‌زمان یه استایل مشترک تعریف کنی، می‌تونی از ویرگول ( , ) بین انتخابگرها استفاده کنی. این کار باعث می‌شه که همه‌ی اون المان‌ها، بدون نیاز به تکرار کد، یه استایل یکسان بگیرن.

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال اول، تمام تگ‌های h1، h2 و h3 استایل یکسان می‌گیرن. در مثال دوم، هم المان‌های با کلاس error و هم المان‌های با کلاس warning متن ضخیم خواهند داشت در مثال سومی یا آخری هم یعنی هرالمانی که آی‌دی title و آی‌دی main-header داره، متنش آبی و ضخیم (bold) می‌شه.

×

جلسه 13 آموزش CSS: باکس مدل (Box Model) در CSS

مطالعه

7️⃣ انتخابگر کل یا انتخابگر تمامی تگ‌ها

اگه می‌خوای یه استایل روی تمام المان‌های صفحه اعمال بشه، می‌تونی از انتخابگر ستاره (*) استفاده کنی. این انتخابگر، همه‌ی تگ‌های HTML رو بدون استثنا انتخاب می‌کنه و استایلی که تعریف کردی، روی همشون اعمال می‌شه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این کد به همه المان‌های صفحه استایل میده – مثل اینکه با بلندگو به کل افراد و دانش آموزای مدرسه یه خبری رو اعلام کنی! 📢

👨‍👦 رابطه پدر و فرزندی در انتخابگرها

توی HTML، یه سری تگ‌ها داخل تگ‌های دیگه قرار می‌گیرن، مثل وقتی که یه لیست توی یه div باشه یا یه دکمه داخل یه section باشه. به تگ بیرونی پدر (Parent) و به تگ داخلی فرزند (Child) می‌گن.

حالا توی CSS، اگه بخوای فقط و فقط فرزندهای مستقیم یه تگ رو استایل بدی، باید از علامت > استفاده کنی.

×

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

مطالعه

📝 مثال :

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

🔝در مثال بالا :

• پاراگراف اول چون مستقیم داخل <div> هست، متنش قرمز می‌شه.
• پاراگراف دوم چون اول داخل <span> رفته و بعد داخل <div> هست، قرمز نمی‌شه!

🔹 این روش بهت کمک می‌کنه که فقط فرزندهای مستقیم یه تگ رو استایل بدی، نه همه‌ی تگ‌های توی اون المان! 😃

نکته ☢️

اگه بخوای تمام فرزندان یک تگ (چه مستقیم، چه غیرمستقیم) رو انتخاب کنی و استایل بدی، از علامت فاصله (space) استفاده کن. این انتخابگر تمام نوادگان (یعنی هر تگی که داخل تگ پدر قرار داره، حتی اگه به‌طور مستقیم داخلش نباشه) رو هدف قرار می‌ده.

×

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

مطالعه

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• پاراگراف اول چون مستقیم داخل <div> هست، رنگش سبز می‌شه.
• پاراگراف دوم چون داخل یه <span> هست که خودش داخل <div> قرار داره، این هم رنگش سبز می‌شه.
  🔹 پس توی این روش، تمام فرزندهای یک تگ (مستقیم یا غیرمستقیم) استایل می‌گیرن. 😎🌿

💬 سخن پایانی

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

امیدوارم این مقاله جامع و کاربردی درباره انتخابگرها برات مفید بوده باشه. ولی خب، جلسه و مبحث انتخابگرها هنوز تموم نشده و بخش دوم هم داریم که منتظرش باش… 😎

×

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

مطالعه

اگر سوالی داشتی یا نیاز به توضیحات بیشتری بود، حتماً توی نظرات بگو تا بیشتر راهنماییت کنم. 💻✨

موفق باشی! 🌟

×

جلسه 8 آموزش CSS: کار با پس زمینه ها (Backgrounds) در CSS

مطالعه