جلسه ۲۱: انتخاب کنندگان 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;
}

در بخشهای عملی که ارائه می شود ، نگاه دقیق تری به مواردخواهیم داشت.