Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 22 из 53 · 17 мин
Структурные, логические и для форм: :first-child, :nth-child(), :not(), :is(), :where(), :has() и другие.
Каждая вторая строка списка — светлее. Карточка с фото — в две колонки, без фото — в одну.
Теперь я умею смотреть внутрь: :has() — «родитель, у которого есть…». Раньше это делали скриптами.
:first-child<style>
li:first-child { font-weight: 700; }
</style>
<ul><li>Первый</li><li>Второй</li></ul>:last-child<style>
li { border-bottom: 1px solid #c8763a; } li:last-child { border-bottom: none; }
</style>
<ul><li>Раз</li><li>Два</li><li>Последний без линии</li></ul>:nth-child():nth-child(2n) — чётные, 3 — третий, -n+3 — первые три.<style>
li:nth-child(2n) { background: #fdf6ec; }
</style>
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>:nth-of-type()<style>
p:nth-of-type(2) { color: #c8763a; }
</style>
<h2>Заголовок</h2><p>Первый абзац</p><p>Второй абзац</p>:not()li:not(:last-child) — все, кроме последнего.<style>
li:not(:last-child)::after { content: " ·"; }
</style>
<ul style="display:flex;gap:4px;list-style:none"><li>Канцтовары</li><li>Чай</li><li>Аксессуары</li></ul>:is():is(h1, h2, h3) a — короче, чем перечислять. Вес — самого сильного внутри.<style>
:is(h1, h2) span { color: #c8763a; }
</style>
<h1>Мой <span>блог</span></h1><h2>Меню <span>осень</span></h2>:where():is(), но специфичность 0.<style>
:where(ul, ol) { padding-left: 1rem; } .menu { padding-left: 0; }
</style>
<ul class="menu"><li>Перебили легко</li></ul>:has().card:has(img) — карточки, внутри которых есть картинка.<style>
.card:has(img) { border: 2px solid #c8763a; } .card { padding: 8px; margin: 4px 0; }
</style>
<div class="card"><img src="https://picsum.photos/id/431/60/40" alt="" width="60" height="40"> С фото</div><div class="card">Без фото</div>:empty<style>
.badge:empty { display: none; } .badge { background: #c8763a; color: white; padding: 2px 6px; }
</style>
<span class="badge">new</span> <span class="badge"></span>:roothtml, удобно для переменных.<style>
:root { --brand: #6b3e26; } h1 { color: var(--brand); }
</style>
<h1>Мой сайт</h1>:targetid в адресе после #.:focus-visible<style>
button:focus-visible { outline: 3px solid #c8763a; }
</style>
<button>Tab ко мне</button>:focus-within<style>
form:focus-within { box-shadow: 0 0 0 3px #c8763a; } form { padding: 6px; }
</style>
<form><input placeholder="Поиск"></form>:checked<style>
input:checked + label { font-weight: 700; color: #6b3e26; }
</style>
<input type="checkbox" id="w" checked><label for="w">У окна</label>:disabled<style>
button:disabled { opacity: 0.5; cursor: not-allowed; }
</style>
<button disabled>Нет мест</button>:requiredrequired.<style>
input:required { border-left: 4px solid #c8763a; }
</style>
<input required placeholder="Телефон">:invalid<style>
input:invalid { border-color: crimson; }
</style>
<input type="email" value="не почта">:user-invalid:invalid, но только после того, как человек взаимодействовал с полем.<style>
input:user-invalid { outline: 2px solid crimson; }
</style>
<input type="email" required placeholder="Почта">:has() — суперсила: «стилизуй родителя по содержимому». Раньше для этого был нужен JavaScript.
Чётным пунктам .menu li задай фон #fdf6ec через :nth-child(2n), а карточкам .card, в которых есть img, — рамку 2px solid #c8763a через :has().
Выберите один ответ.
Что выберет .card:has(img)?
Выберите один ответ.
Чем :where() отличается от :is()?
Выберите один ответ.
Какой псевдокласс подсветит ошибку только после того, как человек начал заполнять поле?
Проверяем состояние обучения…