دوره مجازی طراحی وب (جلسه 10): انواع سلکتور های CSS - قسمت دوم

- visibility ۴٣ mode_comment

در ادامه جلسه قبل که بعد از انجام یک مینی پروژه و ایجاد یک قالب خالص HTML به معرفی سلکتورهای مختلف CSS پرداختیم، امروز هم ادامه ی این سلکتور ها رو به شما معرفی می کنیم که اکثرا در CSS3 معرفی شدند و قابلیل های جالبی رو به سلکتورهای CSS افزودند.

:: عموم مطالب ارائه شده عبارتند از :

  • سلکتور [attribute]
  • سلکتور [attribute=value]
  • سلکتور [attribute~=value]
  • سلکتور [attribute|=value]
  • سلکتور [attribute^=value]
  • سلکتور [attribute$=value]
  • سلکتور [attribute*=value]
  • سلکتور :active
  • سلکتور ::after
  • سلکتور ::before
  • سلکتور :checked
  • سلکتور :disabled
  • سلکتور :empty
  • سلکتور :enabled
  • سلکتور :first-child
  • سلکتور ::first-letter
  • سلکتور ::first-line
  • سلکتور :first-of-type
  • سلکتور :focus
  • سلکتور :hover
  • سلکتور :in-range
  • سلکتور :invalid
  • سلکتور :lang(language)
  • سلکتور :last-child
  • سلکتور :last-of-type
  • سلکتور :link
  • سلکتور :not(selector)
  • سلکتور :nth-child(n)
  • سلکتور :nth-last-child(n)
  • سلکتور :nth-last-of-type(n)
  • سلکتور :nth-of-type(n)
  • سلکتور :only-of-type
  • سلکتور :only-child
  • سلکتور :optional
  • سلکتور :out-of-range
  • سلکتور :read-only
  • سلکتور :read-write
  • سلکتور :required
  • سلکتور :root
  • سلکتور::selection
  • سلکتور :target
  • سلکتور :valid
  • سلکتور :visited
info توجه

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

ثبت نام در دوره آموزش طراحی وب

comment دیدگاه کاربران
بهرام آزادی

با سلام
یه سوال داشتم
مورد سلکتور های رویدادی که درون کروشه قرار میگیرند در مثال ها زمانی که از attribute html استفاده کردین مقدار آن را در دبل کوتیشن قرار دادین [“href=”https]
ولی در مثال های دیگر از دبل کوتیشن استفاده نشد این دلیل خاصی داره؟

لقمان آوند

سلام
معمولا وقتی بخواید یک رشته متنی رو تو کدها استفاده کنید درون “” قرارش میدید. برای بعضی موارد که از قبل در صفحات وب معنی خاصی دارند استفاده از “” اختیاری هست .

sokoot67

این جوری پشتیبانی میکنید و پاسخو دانشجو ها رو میدید الان 31 روز من سوال پرسیدم جوابم ندادید

لقمان آوند

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

حسین فراهانی

سلام جناب آوند .
من درست فرق بین nth-of-type و nth-child رو متوجه نشدم .
آیا کارشون یکسانه ؟ چون تو table>tr از هر کدوم از این سلکتورها استفاده بشه با فرمول 2n سطرهای زوج رو تحت تاثیر قرار میده .

لقمان آوند

nth-child مربوط به فرزندان هست، مثلا همه فرزندانی که زوج هستن.
nth-of-type مربوط به تگهایی با نوع خاص. مثلا p هایی که زوج هستن !

علی صوفی

سلام
اقای اوند شب بخیر خواهشن کمکم کنید
من در یک صفحه 30 تا عکس کوچیک به شکل ایکون دارم که میخوام دریفی به صورت ستونی و سطری کنار هم قرار بگیره و اینا همشون لینک دارن و اینکه یه شکل خوشکلی به این عکسا بدم چیکار میتونم بکنم بهترین روش چی هست کمکم کنید لطفا اینم ادرس صفحه
http://digitamirgah.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%D8%B9%D9%85%DB%8C%D8%B1%D8%A7%D8%AA-%DA%A9%D9%88%D9%84%D8%B1-%DA%AF%D8%A7%D8%B2%DB%8C/

وحید صالحی

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

itone

خسته نباشید استاد اوند :
استاد میشه سلکتور های مهم رو برای من لیست کنین … و اونهایی که توی صفحه وب کاربرد بیشتری دارند !
اگه زحمتی نیست البته … 😳 😀 😀 😉

لقمان آوند

همه سلکتور ها مهمند.
در فایل های جلسات یه فایل شامل سلکتورها داریم اونو استفاده کنید.

itone

سلام مجدد استاد عزیز خودم!!! 😛 😛 😛 😛 😛
استاد یه سوال توی تیبیل واسه اینکه یه خط در میون استایل دهی کنیم چرا از کد زیر استفاده نکردیم ؟؟

میره n امین فرزند رو توی تیبل راو ها انتخاب میکنه که طبق گفته خوتون میشه الگوی زوجو فرد داد

اما این کدی که خودتون نوشتید نفهمیدم دقیقا چی کار میکنه ؟؟ اگه میشه توضیح کوچیک بدید …

استاد لقمان ببخشید این قدر سوال \رسیدم …
یه سوال دیگه 🙁 🙂 🙂 🙂 😀
توی سلکتور nth-child()
توی () به غیر از عدد و الگو چه چیز دیگه ای میشه ورودی داد ؟؟؟ توی w3scholl رفتم سه تا ورودی داده بود ؟؟

ممنون به خاطر \اسخگوییتون ببخشید اینقدر سوال کردم ❗
بازم تشکر 😆

لقمان آوند

سلام
بله میشه و روش های مختلفی برای انجام یه کار هست 😉
میشه دقیقا بگید کجا 3 ورودی داده بود ؟

itone

http://www.w3schools.com/cssref/sel_nth-child.asp
توی این قسمت !!!
این توضیحم نوشته :

دقیقا نفهمیدم چی گفته 😳

لقمان آوند

این که سادست.
کلمات odd و even رو به صورت خاص برای تعین عناصر فرد و زوج میشه استفاده کرد. معادل همون 2n+1 و 2n هستند به ترتیب …

حمیدرضا

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

پشتیبانی سون لرن

سلام دوست عزیز این مشکل در حال پیگیری لطفا منتظر باشید

وحید صف آرا

استاد سلکتوری هست که بشه باهاش گفت تگ های p که درونشون تکستشون کلمه “فلان” وجود داره؟

وحید صالحی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2