لینکهای مفید برای شرکت در مسابقه:
+ [قالب صورت سوال و نحوه داوری Front-End](https://quera.ir/course/assignments/5546/problems)
+ [قوانین شرکت در مسابقات](https://quera.ir/course/assignments/2693/problems/33523)
+ [اطلاعات بیشتر در مورد این مسابقه](https://quera.ir/events/snappfood/)
+ [آشنایی با امکان جدید Quera: تست نمونه سوالهای تکنولوژی](https://quera.ir/course/assignments/2693/problems/42815)
در قسمت آموزشی برای حل سوالات، **سه سری راهنمایی** به انتهای سوالات اضافه میشود. زمان اضافه شدن راهنماییها را میتوانید در قسمت آموزشی پایین سوالات ببینید. همچنین میتوانید سوالهای خود را از بخش "سوال بپرسید" مطرح کنید.
ظاهر کلی برنامه بدین صورت است:

# پروژه اولیه
پروژه اولیه را از
[این لینک](/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>