سلکتور های CSS - قسمت دوم

دسته بندی: آموزش
زمان مطالعه: ۱ دقیقه
۰۵ بهمن ۱۳۹۳

در ادامه جلسه قبل که بعد از انجام یک مینی پروژه و ایجاد یک قالب خالص 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
:: توجه

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

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

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

علی افرند

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

قنبری

خواهشمندم مورد را بررسی کنید و اطلاع دهید.
با تشکر

وحید صف آرا

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

وحید صالحی

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

حمیدرضا

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

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

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

itone

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

لقمان آوند

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

itone

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

Example
Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).
Here, we specify two different background colors for odd and even p elements:
p:nth-child(odd) {
 background: red;
}
p:nth-child(even) {
 background: blue;
} 

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

لقمان آوند

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

itone

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

tr:nth-child(2n){background-color:#FF9933; border:1px solid #FFCCFF}
tr:nth-child(2n+1){background-color:#6699FF; border:1px solid #FFCCFF}

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

table tr:nth-of-type(){}

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

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

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

لقمان آوند

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

علی صوفی

سلام
اقای اوند شب بخیر خواهشن کمکم کنید
من در یک صفحه 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/

وحید صالحی

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

حسین فراهانی

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

لقمان آوند

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

sokoot67

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

لقمان آوند

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

بهرام آزادی

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

لقمان آوند

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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