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

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

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

selector ها در css قسمت ۲

CSS

فصل سوم : Selector ها در  CSS

جلسه دوم  : selector ها در css قسمت ۲

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

تو جلسه ی قبل تعدادی از انتخابگرهارو توضیح دادم ، تو این جلسه selector های دیگه رو براتون توضیح میدم.

انتخابگر before

مثال :p:before

توضیح : با استفاده از before شما میتونید محتوایی رو قبل از محتوای عنصر مورد نظر قرار بدید . در این مثال ما محتوایی رو قبل از محتوای عنصر p قرار میدیم .

نسخه سی اس اس :   ۲,۳

مثال html : در مثال زیر قبل از تمامی عناصر p کلمه iroschool رو نمایش میده :

انتخابگر after

مثال : p:after

توضیح : با استفاده از after شما محتوایی رو بعد از محتوای عنصر مورد نظر قرار میدید .

نسخه سی اس اس : ۲,۳

مثال html : در مثال زیر بعد از تمامی عناصر p کلمه iroschool رو نمایش میده :

 

 انتخابگر element1~element2

مثال : p~ul

توضیح : این مثال تمامی ul هایی که بعد از عنصر p قرار گرفتن رو انتخاب می کنه . مهم نیست بلافاصله بعد از عنصر p اومده باشند ،کافیه یک عنصر p باشه ، هرچقدر عنصر ul بعد از p در کدمون لحاظ کنیم ، مورد انتخاب selector ما قرار میگیره .

نسخه سی اس اس : ۳

انتخابگر [attribute^=value]

مثال :  [“a[src^=”https

توضیح : این مثال تمامی عناصر a رو که src اونها با https شروع میشه انتخاب میکنه .

نسخه سی اس اس : ۳

انتخابگر [attribute$=value]

مثال :   [“a[src$=”.pdf

توضیح : این مثال تمامی عناصر a رو که src اونها با .pdf خاتمه پیدا کرده باشه رو انتخاب میکنه .

نسخه سی اس اس : ۳

انتخابگر [attribute*=value]

مثال :  [“a[src*=”iroschool

توضیح : این مثال تمامی عناصر a رو که src اونها حاوی کلمه ی iroschool باشه رو انتخاب می کنه .

نسخه سی اس اس : ۳

انتخابگر first-of-type

مثال :  p:first-of-type

توضیح : این مثال اولین عنصر p رو در یک عنصر والد  انتخاب میکنه .

نسخه سی اس اس : ۳

مثال html : به مثال زیر توجه کنید :

 

 انتخابگر last-of-type

مثال : p:last-of-type

توضیح : این مثال آخرین عنصر p رو در یک عنصر والد انتخاب می کنه .

نسخه سی اس اس : ۳

 

انتخابگر only-of-type

مثال : p:only-of-type

توضیح : هر تگ <p>  که تک فرزند (only child) والد (parent) خودش باشه رو انتخاب میکنه.

نسخه سی اس اس : ۳

مثال html : به مثال زیر توجه کنید ، فقط عنصر p اول رو انتخاب میکنه چون فقط یک عنصر p در عنصر div داریم.

انتخابگر only-child

مثال :   p:only-child

توضیح : این مثال عنصر p که فقط خودش فرزند والدش هست رو انتخاب میکنه .

نسخه سی اس اس : ۳

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

انتخابگر nth-child(n)

مثال : (p:nth-child(2

توضیح :  این مثال دومین عنصر p در یک عنصر والد رو انتخاب میکنه .

نسخه سی اس اس : ۳

انتخابگر :nth-of-type(n)

مثال : (p:nth-of-type(2

توضیح : این مثال تمامی عناصر p که دومین عنصر p در تگ والدشون باشند رو انتخاب میکنه .

نسخه سی اس اس : ۳

انتخابگر last-child

مثال : p:last-child

توضیح : این مثال آخرین عنصر p در عنصر والدش رو انتخاب میکنه .

نسخه سی اس اس : ۳

انتخابگر root

مثال :    root:

توضیح : این مثال عنصر ریشه در سندتون رو انتخاب میکنه ، عنصر ریشه هم عنصر html هست .

نسخه سی اس اس : ۳

انتخابگر empty

مثال :    p:empty

توضیح : این مثال عناصر p که خالی هستند و هیچ محتوایی ندارند رو انتخاب میکنه .

نسخه سی اس اس : ۳

انتخابگر target

مثال : news:target#

توضیح : گاهی اوقات شما لینک های محلی ایجاد میکنید بصورتی که با کلیک به روی یک گزینه صفحه به سمت یک باکس میره و اون باکس رو نمایش میده که اصطلاحا به این عمل anchor میگن . حالا با این selector شما میتونید هدف مورد نظر که active میشه رو انتخاب کنید و استایل مورد نظر رو بهش بدید . برای درک بهتر به مثال زیر دقت کنید :

 با کلیک روی Jump to New content 1 عنصر New content 1… انتخاب میشه و استایل مورد نظر بهش داده میشه و با اون استایل نمایش داده میشه .

این قابلیت میتونه کاربردی باشه چرا که از explorer8 به بعد هم پشتیبانی میشه .

انتخابگر enabled

مثال : input:enabled

توضیح : این مثال input هایی رو که enable هستند انتخاب می کنه .

نسخه سی اس اس :  ۳

انتخابگر disabled

مثال : input:disabled

توضیح : این مثال input هایی رو که disabled هستند انتخاب می کنه .

نسخه سی اس اس : ۳

انتخابگر  checked

مثال : input:checked

توضیح : این مثال input هایی رو که تیک خورده انتخاب می کنه .

نسخه سی اس اس : ۳

انتخابگر not(selector)

مثال :   (not(p:

توضیح : این مثال تمامی عناصر رو انتخاب می کنه به جز عنصر p .

نسخه سی اس اس : ۳

انتخابگر selection::

مثال :    selection::

توضیح : این مثال هرکجارو که کاربر انتخاب کنه استایل میده ، حالا یا بصورت دابل کلیک یک گزینه رو انتخاب میکنه highlight میشه و یا با موس محتوا رو انتخاب میکنه . شما میتونید برای اون highlight یک استایل تعریف کنید . برای مرورگر فایرفاکس هم از moz-selection-:: استفاده می کنیم .

نسخه سی اس اس : ۳

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

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

<<

>>

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



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

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

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

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

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

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

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

  • mostafa

    veri good

  • hassani

    خانم رحیمی واقعا ممنون که اینقدر وقت گذاشتین و این موضوع مهم در css رو به این خوبی توضیح دادین. در کارهای پیچیده و پر حجم برای کمتر شدن حجم فایل و انتخاب گسترده تر میتونه خیلی به کار بیاد.فقط بعضیاش که یکی هستند مثل:
    p:only-of-type و
    p:only-child
    هر دوتاشون اشاره به تک فرزندی داره!!!!!!!

  • hassany

    ببخشید توضیح نمیدین.

  • hassany

    اینکه بعضی از انتخابگرها به یه صورت عمل میکنن ومثلا
    p:only-of-type و
    p:only-child
    هردوتاشون اشاره به تک فرزندی دارن.

    • میترا رحیمی

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

  • hassany

    بله یه کم که بیشتر دقت کردم متوجه شدم.در واقع انتخابگر :only-of-type اشاره داره به عنصری که فقط خودش فرزند والدش از اون نوع عنصر هست و والدش میتونه فرزندان دیگه ای به غیر از اون نوع عنصر داشته باشه.مثلا p:only-of-type اشاره داره به عنصر pیی که تنها فرزند عنصر والدش از نوع p هست و والدش میتونه عناصر دیگه ای مثل:span و… داشته باشه.ولی انتخابگر :only-child اشاره داره به عنصری که خودش تنها فرزند والدش باشه و والدش اصلا فرزندی به غیر از اون نداشته باشه.اینو گفتم شاید به درد بقیه کاربرا هم بخوره

    • میترا رحیمی

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

  • بهرام نورآیین

    عالی
    Thank you for teach.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

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

سوابق کامل

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

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