ظاهر کلی برنامه بدین صورت است:
# پروژه اولیه
پروژه اولیه را از
[این لینک](/contest/assignments/20209/download_problem_initial_project/65889/)
دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
nested-selector
├── index.html
└── styles.css
```
<details class="brown">
<summary>
راه‌اندازی پروژه
</summary>
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# جزئیات
در فایل `html` داده شده دو تگ `p` در داخل یک `div` با ایدی `container` و یک تگ `p` دیگر بیرون از آن قرار گرقته است.
شما باید با استفاده از انتخاب‌کننده‌های مناسب استایلی بسازید که باعث شود تگ‌های داخل `container` دارای رنگ `indigo` و تگ خارج از آن دارای رنگ `indianred` باشد.
# نکات
- شما تنها مجاز به اعمال تغییرات در فایل `styles.css` هستید.
- فقط فایلی را که مجاز به تغییر هستید باید آپلود نمایید.
# قسمت آموزشی
در این قسمت راهنمایی‌های سوال، به مرور اضافه می‌شود. مشکلات‌تان در راستای حل سوال را می‌توانید از بخش ["سوال بپرسید"](https://quera.ir/contest/clarification/20209/) مطرح کنید.
<details class="blue">
<summary>
راهنمایی ۱
</summary>
مقدار یک ویژگی المان ممکن است چندین بار تغییر کند ولی هربار مقدار جدیدی بگیرد. برای مثال رنگ یک تگ `p` یکبار مشکی است و یکبار قرمز.
درباره این موضوع یک سری قواعد وجود دارد که هرکدام اولویتی دارند و بسته به اولویت آن‌ها، استایل‌ها داده می‌شود.
یکی از این موارد قرار گرفتن استایل جدید بعد از استایل ما می‌باشد.
یکی دیگر از این موارد استفاده از `!important` در هنگام استایل‌دهی می‌باشد که صرف از نظر از تقدم استایل‌ها، آن استایل که دارای `!important` می‌باشد، انتخاب می‌شود.
**درنهایت ترکیب اولویت‌ها و انتخاب‌کننده‌ها منجر به انتخاب استایل توسط مرورگر می‌شود.**
</details>
<details class="blue">
<summary>
راهنمایی ۲
</summary>
مهم‌ترین و پرکاربردترین قواعد انتخاب استایل توسط مرورگر این است که هرچه انتخاب‌کننده (*selector*) خاص‌تر باشد، آن انتخاب می‌شود.
```
a {
color: yellow;
}
nav > a {
color: green;
}
```
در مثال بالا رنگ تگ‌های `a` سبز انتخاب می‌شود چرا که انتخاب‌کننده خاص‌تر است.
**ترکیب این قاعده با قاعده قبلی منجر به انتخاب استایل توسط مرورگر می‌شود.**
</details>
<details class="blue">
<summary>
راهنمایی۳
</summary>
استایل‌های داخل *HTML* به استایل‌های داخل فایل‌های *CSS* مقدم هستند. این تقدم را می‌توان با استفاده از `important!` از بین برد.
برای تغییر تقدم `important!` می‌توان سلکتور را مشخص‌تر کرد. در این حالت استایلی که سلکتور آن خاص‌تر باشد، انتخاب می‌شود.
</details>