مدرس دوره

مدرس دوره

نبی عبدی

مدت زمان ویدیو

زمان ویدیو

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 به صورت پروژه محور است.

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

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

پنج − 2 =

عیـــد غدیــــــر مبارکـــــ ! از 33% تا 67% تخفیــــف ویــــژه... به مدت محدود ...بـــزن بریـــــــم!
+