campaign-edianeh-98

دوره مجازی طراحی وب (جلسه 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 دیدگاه کاربران
asipool lika replyپاسخ

آوند جان ممنون.. دیگه دارم خیلی حرفه ایی میشم.. مشکلی داشتی میتونی ازم سوال کنی 😆 😉

لقمان آوند

😉 حتما …

ادریس replyپاسخ

تشکر استاد
خسته نباشید

Mahdi replyپاسخ

verrrrrrrry Good 😉

منصور جواهر replyپاسخ

سلام
اقای اوند این دوره چند قسمت هست ؟

لقمان آوند

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

Amir Th replyپاسخ

سلام با تشکر از زحمات شما
استاد قسمت یازده و دوازده کی میاد؟

لقمان آوند

ایشالله فردا و شنبه .

Amir Th

استاد قرار بود که این هفته سه قسمت باشه اخه هفته ی قبلم که یه قسمت دادین !!!!و استاد از قبل زمان جلسات رو مشخص کنین که سر وقت تر باشه و بدونیم کی میاد مثل اموزش فتوشاپ اقای صالحی از نظر سر وقت بودن یکم بی نظمی دارین استادد و روز دقیق جلسات مشخص نیست

لقمان آوند

سلام امیر اقا
گفتم در هفته های بعد. نه این هفته.
الان چندمین باره که این مورد رو ذکر کردید.
آقای صالحی از قبل جلسات رو ضبط کردن و فقط رندر اونها مونده. ضمن اینکه سرشون خلوته و تمرکزشون روی همون یه دوره است.
باورتون نمیشه من چقدر سرم شلوغه. مدیریت سایت، مدیریت سرور و پیکربندی اون، پاسخگویی به سوالات و پشتیبانی دوره ها، جمع آوری و ضبط جلسات دوره، تهیه پکیج و بسته بندی و پست اونا، دروس و امتحانات دانشگاه، کارای تحقیقاتی دانشگاه و پروژه های دانشگاهی، و کلی کار متفرقه دیگه. که همیشه باعث شده وقت کم بیارم . اگر این گرفتاری ها نبود خداییش هر روز 1 جلسه میذاشتم . یکم بنده رو درک کنید .
همونطور که قبلا هم گفتم علیرغم همه این گرفتاری ها، هفته ای دو جلسه منتشر میشه …
مجدد عذرخواهی می کنم اگر در انتشار جلسات یکی دو روز پس و پیش میشه …

Amir Th

ولی من این اولین بار هست که درباره دوره از شما انتقاد می کنم و بنده نمی دونستم که شما هنوز هم دانشگاهتون ادامه دارم و فکر می کردم تعطیلی بین دو ترم هست که درگیر دانشگاه هستین که هیچ عیبی نداره پس منو ببخشید که هم چین حرفی زدم عذر خواهم ❓

لقمان آوند

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

mansouri replyپاسخ

آقا +1 تونو رند کردم 😀 رسما شد 2000 تا 🙂
آقا سرعتتونم بالا رفته ها من اون اوایل قسمت 1 و 2 رو دیدم واسه 3 و 4 خیلی منتظر موندم هی میگفتم چقدر فاصلش زیاده ! بعد 3 حدود 14 روز امتحانات و مشکلات فشار اورد دانلود کردیم ولی نتونستیم بگیریم الان اومدم دیدم دیدیم یا علی تا 10 اومده من تا 3 دیدم 😀

لقمان آوند

ممنون از شما
به خاطر این +1 ویژه مبلغ ناقابل 5 هزارتومان دیگه به اعتبار هدیه شما اضافه شد .
وقت برای دیدن هست . عجله نکنید !
موفق باشید دوست عزیز

mansouri

ممنون بابت لطفتون 😀

عماد نادری replyپاسخ

سلام
کد nth-of-type و کدهای مشابه که شامل دستورات جدید میشن در مرورگرهای نسخه های پایین تر اجرا نمیشن سوالم اینه که آیا راه حلی داره آیا توی طراحی صفحه وب بایید در نظر گرفته بشه یا فقط باید برای نسخه های جدید طراحی بشه بعضی وقتها مشتریها اصرار دارن توی نسخه پایین تر هم سایت به درستی نمایش داده بشه

لقمان آوند

سلام
نه، این کد تو نسخه های قدیمی کار نمیکنه!
راه حل جایگزین اینه که با روش های برنامه نویسی به مثلا n امین تگ یه کلاس خاص نسبت بدید و اونو تو css تعریف کنید !

Mahdi replyپاسخ

استاد قسمت بعدی رو کی قرار میدین؟

لقمان آوند

روی سایت قرار گرفته …

sadaf replyپاسخ

سلام
استاد :active روی لپ تاپ من کار میکنه اما برای لپ تاپ دوستم هروقت ازین خاصیت استفاده میکنم
خصوصیاتی که به این ویژگی میدم که هنگام کلیک اجرا بشه اجرا نمیشه
به نظرتون عادیه؟

لقمان آوند

نباید اینطور باشه. مرورگرش قدیمی نیست ؟ کدتون رو درست نوشتید ؟

sadaf

در مورد کد که مطمئنم چون دقیقا همین کد در لپ تاپ من کاملا اجرا میشه
من برای اطمینان فقط یک کد معمولی که وقتی روی دایو کلیک کردیم در لحظه کلیک
رنگش عوض بشه هم نوشتم اعمال نشد

لقمان آوند

کدتون رو برای من ایمیل کنید ببینم. مشکل رو هم بگید همونجا .

hojat replyپاسخ

آقای آوند میشه یه توضیح کوتاه برای هرکدوم از این سلکتورها بدین:
invalid: , in-range: , optional: ,out-of-range: , read-only: , read-write:, required:, root:, target: ,valid:

لقمان آوند

اینها اکثرا سلکتورهایی هستند که در اعتبارسنجی فرم ها به کار میرن. مثلا اگه مقدار وارد شده در یک فیلد غیر معتبر باشه سلکتور invalid براش فعال هست و استایل هاش روش اعمال میشن. برای بقیه هم همینطور هست …

بهرام آزادی replyپاسخ

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

لقمان آوند

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

sokoot67 replyپاسخ

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

لقمان آوند

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

حسین فراهانی replyپاسخ

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

لقمان آوند

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

علی صوفی replyپاسخ

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

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

لقمان آوند

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

itone

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

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

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

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

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

لقمان آوند

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

itone

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

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

لقمان آوند

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

حمیدرضا replyپاسخ

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

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

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

وحید صف آرا replyپاسخ

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

وحید صالحی

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

قنبری replyپاسخ

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

علی افرند replyپاسخ

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

ارسال نظرات

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