Селекторы, часть 3 / Чудеса с ~ и :checked [17/18]

Курсы §23. Селекторы. Часть 3
1

Объясните пожалуйста для чего в правиле указали псевдоэелемент :before

#father:checked ~ .cat-in-box[title^=“Отец”]:before {
display:none;
}

@Ineska

2

@juwain, Возьмите Ineska на работу :blush: это же главный консультант форума

1 лайк
3

Я больше по html/css. Js вы объясняете лучше здесь, я читаю)

4

Псевдоэлемент - это “коробка”, которая скрывается, когда вы выбираете один из элементов. Код псевдоэлемента в окне задания не показан, но вы можете посмотреть его с помощью инспектора в инструментах разработчика в браузере (открывается нажатием клавиши F12 на клавиатуре).

1 лайк
5

так посмотрел по f12 Если я правильно понял то :before
Это тот самый слепный на странице желтый блок. который мы скрываем с помощью display:none;
Иногда когда не присутствует написанный css для каждого элемента в коде, это сбивает, и путаешься.

Спасибо за ответ!

.cat-in-box:before {
content: “”;
border-width: 16px;
border-style: solid;
border-color: #B77D3E #F6B267 #F6B267 #F6B267;
background: #F6B267;
box-shadow: 0 0 0 2px #B77D3E;
display: block;
width: 68px;
position: absolute;
top: 0;
left: 0;
height: 56px;

1 лайк