آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

ترکیب سلکتورها در CSS

 css3

فصل چهارم : Properties در CSS

جلسه بیست و چهارم : ترکیب سلکتورها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

اول از همه بابت تاخیر در بروزرسانی سایت عذرخواهی میکنم . بنا به دلایلی مجبور به تغییر دامنه شدیم و به دلیل سئوی دامنه نمیتونستیم تا مدتی مطلب تو سایت درج کنیم. از این به بعد به صورت مرتب و منظم سایت بروزرسانی میشه.

و اما امروز و در این جلسه قصد دارم در رابطه با ترکیب سلکتورها در css صحبت کنم و با ذکر مثال نحوه ی ترکیب سلکتورها رو خدمتتون آموزش بدم.

 

ترکیب ارثی

در ترکیب ارثی و یا Descendant در css شما تعیین میکنید که مثلا عنصر p درون عنصر div چه استایلی داشته باشه. یعنی میتونید عنصر فرزند رو در درون عنصر والد تعریف کنید و استایل دلخواه رو بهش بدید. به مثال زیر دقت کنید:

در این کد عنصر p فرزند عنصر div محسوب میشه چرا که داخل عنصر div قرار گرفته ، حالا به مثال زیر توجه کنید:

در این کد عنصر p فرزند عنصر div محسوب میشه و عنصر a فرزند عنصر p و همچنین عنصر div محسوب میشه. حالا میخوایم به عنصر p استایل بدیم. در اینجا اگر شما بخواین فقط سلکتور p رو مشخص کنید و استایل بدید ، به تمامی p های درون صفحه اون استایل اعمال میشه ، پس مجبور میشید یه class برای p مشخص کنید و به اون کلاس استایل بدید. اینطوری اگر بخواین برای هر عنصر کلاس تعریف کنید و استایل دهی کنید حجم کدهاتون زیاد میشه.

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

در این کد ما به عنصر والد یه کلاس بنام iranweblearn اختصاص دادیم. حالا میخوایم به عنصر p استایل بدیم.

در این کد اگر توجه کنید متوجه میشید که ما به عناصر p درون کلاس iranweblearn استایل دادیم و گفتیم فونت های تمامی عناصر p قرمز باشن. با کد بالا به تمامی عناصر p این استایل رو میدیم یعنی اگر ۳ یا ۴ تا یا هرچند تای دیگه عنصر p داشته باشیم این استایل براش تعریف میشه .

در این حالت دیگه به تمامی p های صفحه استایل نمیده و فقط به فرزندهای iranweblearn این استایل رو میده.

حالا اگر میخواین عناصر p درون iranweblearn که فرزند اصلی هستند و اصطلاحا نوه محسوب نمیشن (یعنی داخل یه عنصر دیگه قرار نگرفتن و سطح اول در درون کلاس iranweblearn هستند) این استایل رو بگیره باید بصورت زیر تعریف کنید:

با علامت < تعیین میکنید که p های درون کلاس iranweblearn رو پیدا کن که فرزند اصلی باشند یعنی داخل یه عنصر دیگه نباشند و این استایل رو بهش اختصاص بده.

 

حالا اگر بخواین به عنصر a استایل بدید میتونید به صورت های زیر عمل کنید:

در اینجا گفتیم عنصر a درون عنصر p ی کلاس iranweblearn رو پیدا کن و این استایل رو بهش بده.

در این کد هم گفتیم به تمامی عناصر a درون عنصر p که فرزند اصلی کلاس iranweblearn هست این استایل رو بده.

و در این کدهم گفتیم به تمامی عناصر a موجود در کلاس iranweblearn این استایل رو بده.

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

 

اولین عنصر مجاور در css

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

در اینجا ما یک عنصر p درون iranweblearn داریم و یه عنصر p بعد از کلاس iranweblearn داریم. حالا ما میخوایم به عنصر p مجاور و بعدی کلاس irnweblearn استایل بدیم. برای اینکار از علامت + استفاده میکنیم:

در اینجا گفتیم اولین عنصر p بعد از عنصر iranweblearn رو پیدا کن و این استایل رو بهش بده.

حالا دقت داشته باشید که با این کد شما در صفحه به تمامی p های بعد از عناصری که کلاس iranweblearn رو داشته باشن استایل میدید. برای اینکه فقط به این کد استایل بدید یه id تعریف می کنید و به id استایل میدید (چون id منحصر به فرد هست):

 

و حالا کد css این قسمت :

به این صورت شما فقط به این عنصر p استایل میدید نه تمامی عناصر p صفحه.

 

عناصر عمومی مجاور

در مثال قبل شما میتونستید به اولین عنصر مجاور استایل بدید. در این قسمت میخوایم به تمامی عناصر p بعد از weblearn استایل بدیم:

با قرار دادن علامت ~ به تمامی عناصر p بعد از weblearn استایل میدید.

 

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • majid

    خیلی ممنون آموزشاتون خیلی عالیه خیییلییییی D: به کارتون ادامه بدین .
    امید وارم موفق باشید …

  • علی جرجانی

    سلام
    ممنون. مختصر و مفید.

  • hassany

    خیلی خوب توضیح دادین.
    ممنونم از شما و تمامی دست اندرکاران مدرسه مجازی ایرانیان

  • علیرضا کریمی نژاد

    ممنون از این آموزش

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟