• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6255 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش CSS (فصل دوازدهم - جلسه اول) : سایر گزینشگرها در CSS

17143 ۸ خرداد ۹۲

گزینشکرها (selectors)


در این جلسه از آموزش css با سایر گزینشگرهایی که در Css3 معرفی شده اند صحبت خواهیم کرد.
اگر دومین پست از آموزش css را خوانده اید، با هم درمورد گزینشکرها صحبت کردیم
گفتیم که در css شش نوع گزینشگر برای انتخاب المنتها وجود دارد که یگی از ان ها کلاس های کاذب (pseudo-class) بودند، که این سلکتورها برای نمایش رویدادهای صفحه از جمله، کلیک، هاور، فوکوس و ... استفاده می شوند. در css کلاس های کاذب دیگری نیز وجود دارد که مربوط به طریقه انتخاب فرزندان (child) یک المنت پدراست. ما میخواهیم در این جلسه در مورد آن ها توضیح دهیم.

کلاس های کاذب توارثی


کد html زیر را در نظر بگیرید

حال اگر بخواهیم به هر یک از این گزینه ها یک رنگ متفاوت اختصاص دهیم، چه میکردیم؟ حتما برای هر یک class تعریف می کردیم و رنگ مورد نظر را انتخاب می کردیم. خب این روش درست است اما اگر ندانیم class آن چیست چطور؟ اگر سایت داینامیک باشد، و این اطلاعات بعدا اضافه شود به طوریکه نمیتوان برای آن ها class تعریف کرد؟؟ در این صورت باید از کلاس های کاذب توارثی استفاده کنیم.
کلاس های کاذب توارثی موجود در css به ترتیب این ها هستند :
nth-child(n)
nth-last-child(n)
first-child
last-child
حال به تعریف دقیقتر این کلاس های کاذب می پردازیم :

nth-child(n) و nth-last-child(n)


nth-child(n) : با استفاده از این کلاس کاذب می توان برای تک تک المنت های یک صفحه وب، بدون استفاده از id یا class برای آن ها یک استایل متفاوت تعیین کنیم.
حرف n در داخل پرانتز یک عدد طبیعی است 1,2,3,...
این عدد تعیین کننده چندمین فرزند از یک المنت پدر است
به طور مثال اولین تگ شماری 1 را دارد دومین شماره 2 و...
به کد css زیر دقت کنید تا متوجه شوید چگونه میتوانیم به هر یک از li های کد html بالا استایل متفاوت دهیم.

البته در مروگر ie فقط از نسخه 9+ کار میکند.
اگر کد را اجرا کنید نتیجه ای شبیه زیر خواهید داشت.

کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل میکند، به این صورت که از اخر به شمارش المنت ها میپرداز.
اگر nth-last-child را جایگزین nth-child در کد css بالا کنیم نتیجه کد به شکل زیر خواهد بود.

first-child و last-child


همانطور که از اسم کلاس ها معلومه first-child اولین فرزند از یک المنت پدر last-child آخرین فرزند از یک المنت پدر رو انتخاب میکنند.
کد css زیر را به کدهای css بالا اضافه کنید

نتیجه

دیگر کلاس های کاذب


selection : این کلاس کاذب استایل المنت را هنگامی که ان را انتخاب میکنیم، (در حالی که کلیک چپ رو نگه داشتیم روی المنت میکشیم یا CTRL + A ( در حالت پیشفرض مرورگرها
هنگامی که به طور مثال متنی رو انتخاب میکنیم، رنگ متن سفید، و پس زمینه ان آبی میشود. ما توانیم با استفاده از این کلاس کاذب این رنگ را هر کدام از المنتها تغییر دهیم یا ان را برای کل صفحه تعیین کنیم.
کد css :

المنت های کاذب (pseudo-elemnt)


بعلاوه کلاس های کاذبی که گفتیم، المنت های کاذب نیز وجود دارند.
::first-letter تغییر استایل اولین کاراکتر از یک متن.
کد html :

کد css :

::first-line تغییر استایل اولین خط از یک متن.

کد css :

بسیار خب آموزش این جلسه نیز به پایان رسید در جلسه بعدی به معرفی گزینشگرهای صفت (attribute) و باقی گزینشگرها میپردازیم.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام
    ممنون آقا سجاد.

  • ‏‏

    عالیه!
    خسته نباشی !
    فقط یه سوال به گفته خودتون ! 15 فصله یعنی بعد سه فصل دیگه تمومه !
    بعدش چه آموزش رو شروع میکنید !

    • ‏‏
      سجاد دریس(۸ خرداد ۱۳۹۲)

      سلام.
      ممنون.
      بعدش آموزش طراحی قالب رو شروع میکنم.

      • ‏‏
        علیرضا اسمعیل زاد(۹ خرداد ۱۳۹۲)

        من فکر میکردم میخواستین j querry رو آموزش بدین
        :sad: :sad:

        • ‏‏
          سجاد دریس(۹ خرداد ۱۳۹۲)

          آموزش jquery در لیست برنامه های سایت هست، اما زمانش هنوز معلوم نیست.

        • ‏‏
          علیرضا اسمعیل زاد(۹ خرداد ۱۳۹۲)

          بهتره آموزش های برنامه نویسی دسکتاپو هم به برنامه هاتون اضافه کنید.مردیم از بس hello world..! چاپ کردیم.

        • ‏‏
          سجاد دریس(۱۰ خرداد ۱۳۹۲)

          اینجا فقط زبان های تحت وب، آموزش داده میشه.

  • ‏‏

    من فکر میکردم این سلکتور ها فقط برای جی کوئری هست، واقعا که این css3 کار رو خیلی آسون کرده… فوق العاده بود آقا سجاد. ممنون

  • ‏‏

    ایوووووووووووووول دمت گرم خیلی وقته منتظر بودم! تا شروع بشه طراحی قالب حرف نداریییییییی

  • ‏‏

    ممنون. یه سوال داشتم ..ساخت سایت فلش نیمه داینامیک چطوریه؟ با چه اپلیکیشن هایی ممنون میشم جواب بدید

  • ‏‏
    چشم به راه(۴ تیر ۱۳۹۲)

    سلام
    با تشکر از ارسال مطالب سایت به ایمیل من
    مسئله ای که منو درگیر کرده اینه که نمیدونم ترتیب و سیر آموزش این مطالب چه طوریه ؟یعنی اول باید کدوم مطالبو یادبگیرم ؟ کدوم مطالب آموزشی پیش زمینه برای یادگیری بقیه مطالبه.لطفاکمکم کنید. 😥

  • ‏‏

    سلام . یه سوال دارم . وقتی کد css و html رو با هم ادغام می کنم و تو یکی از برگه های وردپرس کپی می کنم کار نمی کنه . این در حالیه که اون کد در حالت عادی وقتی با دریم ویور پریویو می کنم کار می کنه و با موس که روی عکس هاور می کنم جواب میده . علتش چیه ؟
    چیکار کنم که این مشکل حل شه ؟

    • ‏‏
      سجاد دریس(۴ شهریور ۱۳۹۲)

      توی کدهاتون یک فایل خارجی رو به صفحه متصل کردین؟

  • ‏‏

    سلام
    ممنون بابت مطالب مفیدتون / بنده یک سوالی داشتم .

    میخواستم بدونم آیا ممکن هست که روی یک div که داخلش لینک قرار گرفته اکشنی برای کلیک کردن بنویسیم ؟

    منظورم این هست که وقتی روی شی کلیک بشه رویدادی اتفاق بیوفته ، مثلا رنگش تغییر کنه .

    اگر ج بله هست باید ب چصورت این کارو انجـام داد ؟ / بنده از selection استفاده کردم متاسفانه جوابی نگرفتم ../

    • ‏‏
      سجاد دریس(۱۵ اسفند ۱۳۹۲)

      سلام.
      بله میشه.
      باید از کلاس کاذب active استفاده کنید به طور مثال

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram