Итоговое испытание
Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 6 из 43.
Задание
ЛегкоВы узнали, как комбинировать CSS-селекторы, используя descendant (потомков), child (дочерние элементы), adjacent sibling (соседние элементы) и general sibling (общие соседние элементы) комбинаторы. Теперь пришло время применить всё это на практике!
- Стилизуйте все элементы
<p>, которые являются прямыми потомками внутри<div>с классом.rooms, используя бирюзово-синий цвет (#40e0d0). - Стилизуйте все элементы
<p>, которые являются потомками<div>с классом.facilities, используя морской зеленый цвет (#2e8b57). - Стилизуйте каждый элемент
<p>, который идет после<div>, используя песочно-бежевый цвет (#f4a300).
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Your CSS solution here */
</style>
</head>
<body>
<section>
<h1>Welcome to Paradise Resort</h1>
<div class="rooms">
<h2>Ocean View Rooms</h2>
<p>Room 101</p>
<p>Room 102</p>
</div>
<div class="facilities">
<h2>Resort Facilities</h2>
<div>
<p>Infinity Pool</p>
<p>Spa & Wellness Center</p>
</div>
<p>Beach Access</p>
</div>
<p>Beachfront Restaurant</p>
<p>Sunset Bar</p>
</section>
</body>
</html>Все уроки раздела CSS Mastery
1Мастерство селекторов — Комбинации
ВведениеСелектор потомковДочерний селекторСмежный селекторОбщий родственный селекторИтоговое испытание4Проект: Выпадающее меню
Добавление подменюОтображение подменюДополнительная стилизацияПоле ввода и кнопка2Интерактивные псевдоклассы
ПсевдоклассыЭффекты наведенияЭффекты фокусаАктивные стилиИтоговое испытание