جلسه ۲۱: انتخاب کنندگان CSS – دوباره! در CSS

در این درس ، نگاهی خواهیم داشت به سلکتورهای descendant
، انتخابگرهای ترکیب کننده و انتخابگرهای کلاس. گرچه این موارد اکنون برای شما عجیب به نظر می رسند ، من موارد های مهمی را که باید بدانید به شما نشان می دهم. موارد زیر را بیان خواهیم کرد
- منتخب
descendant
انتخابگرهای کلاس - کلاسهای شبه دیگری که باید از آنها آگاهی داشته باشید.
- بچه اول
- مثال:
- آخرین فرزند
- فقط کودک
- فرزند
n
ام - مثال
منتخب نزولی (descendant)
در آخرین درس ، نگاهی به انتخاب کنندگان در CSS
انداختیم. در اینجا ، من فرم دیگری از انتخاب کنندگان css
را معرفی می کنم. بیایید یک مثال ببینیم. html
زیر را در نظر بگیرید:
نشانه گذاری در بالا بسیار ساده است. نکته مهم بین خط ۵ و ۱۲ است. متوجه خواهید شد که div
در خط ۵ دو عنصر سرآیند h1
و h2
را در خود جای داده است. در مورد بخش ۹ می توان همین را گفت. به طور کلی ، html DOM
را می توان از نظر رابطه والدین و کودک نشان داد. منظور من از این کار این است که ، از آنجا که div در خط ۵ عناصر h1
و h2
را در خود جای داده است ، ممکن است div
عنصر اصلی آنها باشد. در نتیجه ، عناصر هدر ، h1
و h2
ممکن است به عنوان عناصر کودک شناخته شوند. CSS
از راهی برای انتخاب عناصر مبتنی بر رابطه DOM
استفاده می کند. نکته اصلی انتخاب descendant
است – که بر اساس رابطه والدین و فرزند است. بیایید یک مثال ببینیم. در مثال بالا ، چگونه h1
و h2
را فقط در div
انتخاب می کنیم؟ با استفاده از انتخاب کننده های descendant
، این کار را انجام دهید:
CSS
فوق فقط h1
و h2
را در قسمت div
انتخاب می کند. h1
و h2
دیگر در برچسب p
بدون حالت باقی می مانند.
div h1 {
color: red;
}
div h2 {
color: red
}
همانطور که در بالا مشاهده می کنید ، سربرگ ۱ و سربرگ ۲ بدون حالت باقی مانده است! جالب هست. اکنون پیش بروید و عناصر هدر را در بخش استایل دهید. راه حل من این است:
section h1,
section h2 {
color: blue;
}
می بینی من آنجا چه کرده ام؟ برای جلوگیری از تکرار ، چندین جمله نوشته ام و به آنها حالت داده ام. این خلاصه ای است از آنچه شما باید در مورد انتخاب فرزندان بدانید. بیایید نگاهی به فرم دیگری از انتخابگر CSS
بیندازیم.
انتخاب کنندگان Pseudo-class
سند اصلی html
را در زیر در نظر بگیرید:
a:link {
color: #0000ff;
}
a:visited {
color: #ff00ff;
}
a:hover {
color: #00ccff;
}
a:active {
color: #ff0000;
}
خوب ، من آنجا چه کرده ام؟ در اینجا نکته ای است که با آن آشنا هستید:
a {
color: red;
}
انتخابگر تگ با استایل رنگی تعریف شده است.
بنابراین ، انتخاب کنندگان Pseudo-class
چیستند؟
انتخابگرهای Pseudo-class
، انتخاب کننده را در یک حالت خاص هدف قرار می دهند. در مثال بالا a
: link
هر تگ با ویژگی href
را هدف قرار می دهد و آن را استایل می کند. یعنی a که حاوی پیوند است. a: بازدید شده هر تگ لنگر را هدف قرار می دهد ، الف که قبلاً در صفحه بازدید شده است (کلیک شده است). a: هاور هر پیوندی را که بر روی آن قرار دارید ، هدف قرار خواهد داد سرانجام ، a
: active
پیوند را درست می کند ، فقط وقتی روی آن کلیک کنید. وقتی فعال است هنگامی که روی پیوندها حرکت می کنید ، به نحوه تغییر رنگ توجه کنید. همچنین ، توجه داشته باشید که چگونه پیوندهایی که کلیک کرده اید تغییر رنگ می دهند.
a:link {
color: #0000ff;
}
a:visited {
color: black;
}
a:hover {
color: red;
}
a:active {
color: #ff0000;
}
فراموش نکنید که روی زبانه CSS
در خروجی کد بالا کلیک کنید. بیایید در مورد ترتیب نوشتن این پیوندها بحث کنیم.
سفارش انتخاب شبه لینک
اگر نگاهی به برگه CSS
در بالا بیندازید ، متوجه می شوید که من انتخاب شبه پیوند را به ترتیب خاصی نوشته ام. : پیوند ، به دنبال آن: بازدید شده ،: هاور و در آخر ، فعال: اختصار معروف LVHA
ممکن است کمک کننده باشد. LVHA
، تقریباً مانند LoVe HA
!
به طور خلاصه ، ترتیب تعریف این شبه انتخاب کنندگان پیوند مهم است. این باید از دستور LVHA
پیروی کند یعنی پیوند ، بازدید: ، هاور ، و در آخر فعال: Pseudo-classes
دیگری که باید از آنها آگاهی داشته باشید. اگر از تمرین بالا رد شدید ، لطفاً برگردید و آن را انجام دهید. من منتظر می مانم. Pseudo-classes
چیزهای دیگری بیش از لینک دادن به استایل است. زیبایی Pseudo-classes
سهولت آن در مسائل معمول یک ظاهر طراحی شده است. برخی از این موارد را در بخشهای عملی ارائه خواهیم داد. سرگرم کننده خواهد بود در حال حاضر ، بیایید با موارد ضروری راحت باشیم.
بچه اول
در یک مثال ، ما نگاهی به رابطه فرزند والدین در HTML DOM
انداختیم. انتخاب کننده ، فرزند اول همه چیز را می گوید. این یعنی اولین فرزند یک عنصر خاص را در عنصر والد هدف قرار می دهد. یک مثال همیشه عالی است. بیایید یکی را ببینیم
مثال:
علامت گذاری html
زیر را در نظر بگیرید:
ما یک div
داریم با چهار برچسب p
. برای استایل کردن اولین برچسب p با استفاده از انتخاب first-child ، این کار را انجام دهید:
div p:first-child {
color: red
}
در این مثال ، من انتخاب والد div
را اضافه کرده ام. در این حالت خاص ، می توانید این کار را نیز انجام دهید (بدون انتخاب والد)
p:first-child {
color: red;
}
آخرین فرزند
انتخابگر: Pseudo-classes
آخر فرزند مخالف فرزند اول است. در حالی که: فرزند اول فرزند اول را هدف قرار می دهد ،: فرزند آخر فرزند آخر را هدف قرار می دهد.
div p:last-child {
color: red;
}
تنها فرزند
فرزند اول ، فرزند آخر ، اکنون تنها فرزند وجود دارد؟ شاید از خود بپرسید که چرا همه اینها مهم است. اگر می خواهید یک سرباز خوب بسازید ، مهم است که سلاح های موجود را بدانید. همین امر برای یک ظاهر طراحی شده وب نیز صدق می کند. انتخابگر Pseudo-classes
: تنها فرزند عنصری را انتخاب می کند که تنها فرزند والدین خود باشد. به عنوان مثال:
در نشانه گذاری بالا ، li
در ul
دوم تنها عنصر کودک است. می توان متناسب با آن انتخاب و سبک داد:
li:only-child {
color: red;
}
فرزند n ام
خوب ، قول می دهم این آخرین مورد در نوع خود باشد 🙂 تصور کنید به جای استفاده از فرزند اول ، فرزند آخر یا تنها فرزند ، می توانید از nth-child
استفاده کنید یعنی "n"
می تواند چیزی باشد؟ ۱،۲ ، ۳ ، ۴ و غیره؟ عالی و قدرتمند است ، درست است؟ این ، و حتی بیشتر n-child
را در دسترس قرار می دهد.
مثال
علامت گذاری پایه را در زیر در نظر بگیرید:
اولین li
ممکن است به این صورت انتخاب شود:
li:nth-child(1) {
color: red
}
فرزند n
ام هوشمند است که می داند ۱ به معنای فرزند اول است. ممکن است مقدار عددی را متناسب با هدف خود تغییر دهید. یک چیز دیگر… گرچه به نظر جالب می رسد ، فرزند n
ام حتی قدرتمندتر است. این امکان را برای انتخاب چندین عنصر به صورت پویا فراهم می کند. منظور من از عناصر “چندگانه” چیست؟ من می توانم به راحتی هر مورد فرد یا حتی لیست را هدف قرار دهم ، مانند این:
li:nth-child(odd) {
color: red;
}
در بخشهای عملی که ارائه می شود ، نگاه دقیق تری به مواردخواهیم داشت.