هیچ محصولی در سبد خرید نیست.
مدرس دوره
نبی عبدی
زمان ویدیو
08:52 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
آموزش Selectorها در CSS | انتخابگرهای تودرتو
با یکی دیگر از سری جلسات رایگان آموزش 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 و یک قطعه کد استایل که بگراند را زرد می‌کند به آن نسبت داده‌ایم، حال تصویر زیر که مربوط به همین کدهای بالا است را مشاهده کنید:
خب حالا همانطور که در تصویر بالا مشاهده می‌کنید، تگ‌های p که داخل تگ div قرار داشتند بگراند زرد گرفتند ولی تگ‌های p که بیرون از تگ div بودند چون انتخاب نشده بودند، هیچ پس زمینه‌ای ندارند. بنابراین به این شکل می‌توانید از سلکتورهای تودرتو استفاده کنید.
جمع بندی
در انتها امیدواریم که این جلسه نیز مورد توجه شما عزیزان قرار گرفته باشد، سعی کنید تمامی جلسات را به دقت دنبال کنید و موارد را به صورت عملی انجام دهید، تا در نهایت بتوانید با زبان‌های جذاب HTML و CSS آشنا شوید، اما اگر می‌خواهید HTML و CSS را به صورت حرفه‌ای و پروژه محور یاد بگیرید، پیشنهاد ما ثبت نام در دوره آموزش جامع HTML و CSS به صورت پروژه محور است.
سلام در سلکتورهای فیلم مفهوم بزرگتر و کوچکتر و مساوی چیه؟ مثلا p b >b
سلام، این موارد در جلسات پیشرفته تر آموزش داده میشود.