آموزش CSS: انتخابگرها

سرفصل ها و درس ها

معرفی Introduction

• قدرت انتخابگرها The power of selectors

1. بررسی پایه CSS 1. Review of Basic CSS

• اصطلاحات CSS CSS terminology

• لیست های انتخابگر Selector lists

• انتخابگرها، کلاس‌ها و شناسه‌ها را تایپ کنید Type selectors, classes, and IDs

• انتخابگرهای مرکب Compound selectors

2. انتخابگرهای ترکیبی 2. Combinator Selectors

• انتخابگرهای والدین-فرزند Parent-child selectors

• شجره نامه HTML: والدین، فرزندان، اجداد، فرزندان و خواهر و برادر The HTML family tree: Parents, children, ancestor, descendant, and siblings

• منتخب خواهر و برادر مجاور و عام Adjacent and general sibling selectors

• انتخاب کنندگان نوادگان Descendant selectors

• انتخابگرهای خواندن و نوشتن Reading and writing selectors

3. انتخابگرهای صفت 3. Attribute Selectors

• انتخابگرهای مقدار مشخصه ابتدایی، پایانی و دلخواه زیر رشته Beginning, ending, and arbitrary substring attribute value selectors

• انتخابگرهای مقدار مشخصه دقیق و جزئی Exact and partial attribute value selectors

• انتخابگرهای صفت ساده Simple attribute selectors

• ترفندهای جالب انتخاب ویژگی Cool attribute selector tricks

4. شبه کلاس برای ساختارهای اسناد 4. Pseudo-classes for document structures

• درک فقط انتخابگرها، :only-child، :only-of-type Understanding only selectors, :only-child, :only-of-type

• آشنایی با انتخابگرهای n - :nth-child, :nth-of-type, :nth-last-child, :nth-last-of-type Understanding nth selectors – :nth-child, :nth-of-type, :nth-last-child, :nth-last-of-type

• درک اولین و آخرین انتخابگر، :first-child، :first-of-type، :last-child، :last-of-type Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type

• :root و :empty :root and :empty

5. شبه کلاس برای پیوندها 5. Pseudo-classes for links

• :any-link برای ترکیب وضعیت های پیوند :any-link for combining link states

• شبه کلاس‌های دسترسی: :focus،:focus-within Accessibility pseudo-classes: :focus, :focus-within

• حالت های پیوند اصلی: :link، :visited، :hover، :active Basic link states: :link, :visited, :hover, :active

• کلاس های شبه برای پیمایش درون صفحه، :target Pseudo-classes for in-page navigation, :target

6. شبه کلاس برای فرم ها 6. Pseudo-classes for forms

• فیلدهای متنی: : تکمیل خودکار، : محل نگهدارنده نشان داده شده است Text fields: :autofill, :placeholder-shown

• کنترل‌های فرم: فقط خواندنی و :خواندنی-نوشتنی Form controls: :read-only and :read-write

• کنترل های فرم: : مورد نیاز و : اختیاری. :enabled و :disabled Form controls: :required and :optional; :enabled and :disabled

• حالت های کنترل فرم: :indeterminate،:default،:checked Form control states: :indeterminate, :default, :checked

• بررسی خطا: :valid, :invalid, :in-range, :out-of-range Error checking: :valid, :invalid, :in-range, :out-of-range

7. شبه کلاس های اضافی، شبه عناصر و انتخابگر جهانی 7. Additional pseudo-classes, pseudo-elements, and the universal selector

• فهمیدن: نه Understanding :not

• *، انتخابگر جهانی *, the universal selector

• با شبه عناصر آشنا شوید::قبل، ::پس از، ::خط اول، ::حرف اول Meet the pseudo-elements ::before, ::after, ::first-line, ::first-letter

• :has() :has()

• مقایسه is() و Where() Comparing is() and where()

8. انتخاب انتخابگرها 8. Choosing Selectors

• تاثیر انتخابگرهای CSS بر عملکرد Impact of CSS selectors on performance

• انتخابگرهای CSS و پشتیبانی مرورگر CSS selectors and browser support

• چرا نمی توانم به طور انحصاری از کلاس های CSS استفاده کنم؟ بهترین شیوه های انتخاب کنندگان Why can't I use CSS classes exclusively? Selectors best practices

نتیجه Conclusion

• تمرین CSS اضافی Additional CSS practice