مدرس دوره

نبی عبدی

زمان ویدیو

08:52 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

برای دانلود ویدیو

وارد شوید

آموزش Selector‌ها در CSS | انتخابگرهای تودرتو

منتشر شده در تاریخ : 26, تیر, 1400

با یکی دیگر از سری جلسات رایگان آموزش html و css در خدمت شما همراهان گرانقدر آکادمی وبکیما هستیم، در جلسه قبل با کلاس‌ها و آیدی‌ها به صورت کامل آشنا شدید، حال در این جلسه می‌خواهیم Selector ها در CSS را بررسی کنیم، البته دقت کنید که classها و idها هم عضوی از سلکتورها و انتخابگرها هستند، اما در این جلسه می‌خواهیم علاوه بر بررسی کلاس‌ها و آیدی‌ها سلکتورهای تودرتو را نیز بررسی کنیم، پس با این جلسه همراه وبکیما باشید.

انتخاب‌گرهای تو در تو در CSS

خب اگر دوره رایگان آموزش html و css را تا به اینجا و با دقت دنبال کرده باشید، حتما می‌دانید که می‌توان کدهای HTML را به صورت تو در تو نوشت، یعنی شما می‌توانید داخل یک تگ HTML از بی‌نهایت تگ HTML دیگر استفاده کنید، البته دقت کنید که برخی تگ‌ها را نباید داخل برخی دیگر قرار داد و همین موضوع هم قواعد خاص خودش را دارد.

پس حالا که می‌توان کدهای اچ‌تی‌ام‌ال را به صورت تو در تو نوشت، قطعا باید بتوان کدهای انتخابگر CSS را نیز به صورت تو در تو نوشت به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

همانطور که در مثال بالا مشاهده می‌کنید، داخل این قطعه کد 6 تگ P وجود دارد که 3 تای آن داخل تگ div است و 3 تای دیگر آن بیرون از تگ div هستند، همچنین داخل کدهای CSS تگ p را نیز به صورت تو در تو انتخاب کردیم، یعنی ابتدا سلکتور div را قرار دادیم سپس سلکتور p و یک قطعه کد استایل که بگراند را زرد می‌کند به آن نسبت داده‌ایم، حال تصویر زیر که مربوط به همین کدهای بالا است را مشاهده کنید:

سلکتورهای تو در تو در CSS

خب حالا همانطور که در تصویر بالا مشاهده می‌کنید، تگ‌های p که داخل تگ div قرار داشتند بگراند زرد گرفتند ولی تگ‌های p که بیرون از تگ div بودند چون انتخاب نشده بودند، هیچ پس زمینه‌ای ندارند. بنابراین به این شکل می‌توانید از سلکتورهای تودرتو استفاده کنید.

جمع بندی

در انتها امیدواریم که این جلسه نیز مورد توجه شما عزیزان قرار گرفته باشد، سعی کنید تمامی جلسات را به دقت دنبال کنید و موارد را به صورت عملی انجام دهید، تا در نهایت بتوانید با زبان‌های جذاب HTML و CSS آشنا شوید، اما اگر می‌خواهید HTML و CSS را به صورت حرفه‌ای و پروژه محور یاد بگیرید، پیشنهاد ما ثبت نام در دوره آموزش جامع HTML و CSS به صورت پروژه محور است.

5/5 - (3 امتیاز)

نظرات در “آموزش Selector‌ها در CSS | انتخابگرهای تودرتو

  1. الیاس میگوید:

    سلام در سلکتورهای فیلم مفهوم بزرگتر و کوچکتر و مساوی چیه؟ مثلا p b >b

    • پشتیبانی میگوید:

      سلام، این موارد در جلسات پیشرفته تر آموزش داده میشود.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جشنواره بزرگ فروش ... تا 67 درصد تخفیف روی تمامی دوره‌ها ...تخفیف‌تو بگیر!
+
آموزش‌های ویدیویی جدید در یوتیوب