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

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

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

selector ها در css قسمت ۱

CSS

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

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

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

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

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

css

انتخابگر Class

مثال : iroschool.

توضیح : عناصری که شامل class=”iroschool” هستند رو انتخاب می کنه .

نسخه css  : ۱,۲,۳

انتخابگر id

مثال : iroschool#

توضیح : عناصری که شامل id=”iroschool” هستند رو انتخاب می کنه .

نسخه css : 1,2,3

انتخابگر *

مثال : *

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

نسخه css : 2,3

انتخابگر element  (نام عناصر)

مثال : p

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

نسخه css : 1,2,3

انتخابگر element,element

مثال : div,p

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

نسخه css : 1,2,3

انتخابگر element element

مثال : div p

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

نسخه css : 1,2,3

انتخابگر element>element

مثال : div>h2

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

نسخه css : 2,3

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

انتخابگر element+element

مثال : div+p

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

نسخه css : 2,3

انتخابگر [attribute]

مثال : [a[target

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

نسخه css : 2,3

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

مثال : [a[target=_blank

توضیح : این مثال تمامی عناصر a که شامل target هستند و مقدار targetشون برابر با _blank هست رو انتخاب می کنه .

نسخه css : 2,3

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

مثال : [a[title~=flower

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

نسخه css : 2,3

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

مثال : [a[title|=iro

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

نسخه css : 2,3

انتخابگر link

مثال : a:link

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

نسخه css : 1,2,3

انتخابگر  visited

مثال :  a:visited

توضیح : این مثال تمامی عناصر a که از لینکشون بازدید شده (روشون کلیک شده) رو انتخاب می کنه .

نسخه css :  ۱,۲,۳

انتخابگر  hover

مثال : a:hover

توضیح : این مثال تمامی عناصر a رو زمانی که موس روی لینک قرار گرفته انتخاب میکنه.

نسخه css : 1,2,3

انتخابگر  active

مثال :  a:active

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

نسخه css : 1,2,3

انتخابگر focus

مثال : input:focus

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

نسخه css : 2,3

انتخابگر first-letter

مثال : p: first-letter

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

نسخه css  : ۱,۲,۳

انتخابگر first-line

مثال : p:first-line

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

نسخه css  : ۱,۲,۳

انتخابگر first-child

مثال :p:first-child

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

نسخه css  :۲,۳

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

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

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

<<

>>

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



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

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

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

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

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

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

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

  • حمید داستانی

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

  • MAH

    یعنی انقدر خوب و جامع بود که حیفم اومد نظر ندم ممنون از تلاش هاتون

  • Mohammad

    مطالبی که تا اینجا گفتید css2.1 بود یا css3 ?واینکه ادامه اموزشهای css (فصل ۵ به بعد) رو کی میذارید؟
    مرسی

    • میترا رحیمی

      سلام دوست عزیز
      css2.1 پایه ی css3 هست ، بنابراین مطالب رو جداسازی نکردیم . مبانی مربوط میشه به css2.1 هرچی مبحث پیشرفته تر میشه خاصیت های css3 هم اضافه میشه و آموزش داده میشه .
      سعی می کنیم هرچه سریعتر فصول رو آموزش بدیم تا بخش css کامل بشه و پروژه ی عملی تبدیل psd به html رو شروع کنیم .
      فصل ۵ هم به زودی شروع میشه ، فکر می کنم حدودا ۵ جلسه از فصل ۴ باقی مونده .
      موفق و پیروز باشید .

  • samira

    بالاتر از بی نهایت سپاسگذارم از مطالبتون

  • mostafa

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

  • hassani

    خیلی خوب و واضح توضیح دادین.
    تشکر

  • علیرضا

    سلام
    اول به خاطر مطالب عالی و فوق العاده سلیتتون سپاس گذارم
    دوما یه سوال دارم
    این کد چه کاری انجام میده ؟؟؟ .csslider.infinity

    • میترا رحیمی

      سلام دوست عزیز
      این کد و از کجا آوردین ؟ 🙂
      باید تو جایگاهش ببینیم چی کار میکنه.
      موفق باشید

  • علی

    با سلام. میخواستم ضمن تشکر ، بگم که div>p به اولین p در درون div اشاره میکنه و نه به تمام p ها.
    همینطور div+p هم اولین p بعد از div رو دچار تغییرات میکنه

    • حسین همت یار

      سلام دوست عزیز
      دقت کرده باشید به همین صورت در مقاله هم توضیح داده شده.
      لازم به ذکر هست که div > p طبق آموزش به تمامی p هایی که عنصر والدشون div هست اشاره میکنه ، داخل مقاله با h2 مثال زده شده.
      موفق باشید

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

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

سوابق کامل

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

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