با استفاده از pseudo-classes در CSS یک منوی افقی حاوی لینک‌ها و یک لیست آیتم‌ها را استایل دهید به طوری که لینک‌ها در :hover و :focus تغییر رنگ و پس‌زمینه دهند، در :active جلوه فشار یافته داشته باشند، و آیتم‌های لیست به کمک :nth-child زوج و فرد استایل متفاوت بگیرند.

برای حل، یک ساختار ساده HTML با المان nav و ul/li و لینک‌ها بسازید و سپس با CSS پایه‌ای برای چینش افقی منو و فضای بین آیتم‌ها تعریف کنید؛ بعد از آن از سلکتورهای شبه‌کلاس مثل a:hover، a:focus و a:active برای تغییر رنگ، پس‌زمینه و افکت فشار و از li:nth-child(even) و li:nth-child(odd) برای استایل متفاوت آیتم‌ها استفاده کنید. توجه داشته باشید که شبه‌کلاس‌ها از نظر specificity مشابه کلاس‌ها حساب می‌شوند، از استفاده از !important خودداری کنید و برای دسترسی‌پذیری حتماً افکت :focus را پیاده کنید (مثلاً با outline یا تغییر پس‌زمینه) تا کاربران کیبوردی نیز قابل استفاده باشد.