Как заменить псевдокласс has?

Есть верстка где используется псевдокласс :has()

Странная, конечно, логика у того, кто так писал.
Потому что свойство appearance: none, которое позволяет стилизовать радио и чекбоксы напрямую, поддерживается большим количеством браузеров.

Как можно такую конструкцию заменить?

Изменить разметку и использовать составные селекторы ~ или +

Но я бы через appearance проверила.

Как картинку сделать кнопкой?

Если важно, то суть кнопки, это переключение между табами.

Вероятнее всего это фон кнопки.
Вряд ли это контентная смысловая картинка, а не иконочка.

Подскажите, что не так я делаю, и как поправить?

Про всплытие и погружение событий забыли?

Обязательно ли создавать контейнер?

Нужно ли для нее создавать отдельный контейнер другой ширины или можно не создавать контейнер?

Обычно не для неё, а для контента внутри. Потому что это секция является блоком, не важно БЭМ у вас или нет.

Обязательно ли создавать контейнер?

Ну это как вам удобнее верстать.

Но как тогда отцентрировать элементы внутри секции

1. Гриды.
Флексы чуть в меньшей степени.
2. Вешать фон псевдоэлементом от контентной части
3. Паддинги через calc
Ещё как-нибудь, что не пришло в голову прямо сходу.

Общепринятый и стабильный вариант это секция и внутри контейнер-центровщик.

Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Ян Уланов, ну логично.
Про высоту строки написала выше.

Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Ян Уланов,

Так мне нужна середина по горизонтали относительно текста

Может, всё таки речь про вертикаль?
Но вы супер формулируете вопросы. Ведь в исходном ничего нет про середину первой строки. Имеет смысл научится это делать, чтобы получать ответы быстрее.

Если середина первой строки, то это шрифт (1em), умноженный на line-height. Плюс учитывайте отступы, если они отличны от нуля.

Очень удобно использовать кастомные свойства для line-height, чтобы не менять два раза, если придется корректировать.

Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Ян Уланов, Дичь какая-то.

Зачем вы приплели сюда тег FLEXBOX, если ставите псевдо абсолютом?

Конкретно не могу понять почему красный пункт не становится по центру .list2__item2. Что не так делаю?

Потому что вы ничего не написали для того, чтобы он встал по центру.
Если вам нужна середина по вертикали, то зачем пишете значение в пикселях? Ставьте 50% и обратный трансформ -50%.

top: 50%;
transform: translate: -50%;

Ну или используйте тот самый флекс или грид и их стандартные свойства.
Также хочу напомнить о стандартном инлайн-блоке и vertical-align.

p.s. Вертикальное центрирование будет выглядеть очень странно, если строк будет больше, чем одна.

Как добавить анимацию div?

Поддерживаю комментарий выше.

Если что, 5 строк это 5 размеров шрифта умноженных на line-height с возможными корректировками на отступы и нюансы шрифта.
Т.е. решить всё можно на CSS, используя JS лишь для смены класса.

Если на web сайте можно посмотреть исходный код то как это сделать в андроид приложении?

John Didact,

но я продолжу его

Не стоит. Потому что он не имеет отношения ни к основному вопросу, ни к этому ответу.

Если на web сайте можно посмотреть исходный код то как это сделать в андроид приложении?

John Didact,

это именно исходный код ответа сервера

Не исходный код сайта.
Там вообще может быть один дивчик с id="app" и делай с этим что хочешь.

То, что показывает dev tools — не всегда является исходным кодом.

Разумеется.

Если на web сайте можно посмотреть исходный код то как это сделать в андроид приложении?

John Didact, только это не исходный код сайта. В лучшем случае его часть.
И это не тот код, который показывает dev tools.

Как сделать чтобы блоки не ездили туда сюда из за слайдера?

Виктор Таран, а лучше в виде текста в спойлере и ссылки на рабочую песочницу, особенно для слайдеров и прочего, что неудобно компилировать в голове.

Как сделать чтобы блоки не ездили туда сюда из за слайдера?

dmitriypur, вы серьезно верите, что можно угадать, что у вас в коде по скринам? И даже намек не помог?

Нужно сделать песочницу с видимой проблемой, например, на codepen.io.
Есть шанс, что сами догадаетесь в чем дело, пока готовите её.

Как сделать чтобы блоки не ездили туда сюда из за слайдера?

Подскажите, можно ли это исправить?

Наверняка

Как адаптировать изображения так, чтобы при max-width 100% они не пропадали при ширине экрана 900Px?

И почему вы не можете задать минимальную ширину?

Или красиво перестроить блоки.

Почему некорректно отображается иконка?

leeroyjenkins176,

Может вы имели ввиду внутрь HTML? Потому что сейчас он в svg.

Сейчас он мимо своей иконки.

А можете посоветовать инструменты для их сборки?

https://www.npmjs.com/package/gulp-stacksvg

Почему некорректно отображается иконка?

Попробуйте засунуть градиент внутрь SVG.

Вместо символьного спрайта лучше использовать стек из svg. Он будет работать не только в use, но и в img и в любом виде в стилях.

Как очистить кеш у всех пользователей?

Levis474727,

у них есть отдел сеошников, которые потом за эти редиректы загрузут

Намекнуть, что с непрофессионалами лучше не работать.
Потому что кто-то из вас не понимает сути этих редиректов.
Подробно написано, например, в хелпе яндекс вебмастера.
Сеошники только порадоваться должны нормально измененным адресам с редиректами, а не брошенным на произвол судьбы 404.

Никакая очистка кэша вам не поможет, потому что пользователи попадают на сайт не только через главную страницу (или не только через те, что сохранили свои адреса).

Внутренняя сетка блоков, которая только внутри, делим красиво блоки, как реализовывать правильно?

Антон Вебсайтовский, верите в то, что кто-то с аналогичными сложностями наберет в поиске текст как в вашем вопросе?
Если хочется, чтобы вопрос принес кому-то ещё пользу, то нужно его нормально переформулировать.

Ну не скажи, я допустим такие сетки делал, но более топорным методом, а теперь знаю метод лучше.

Из верстки тут знание nth-child и has. Остальное - простенькая логика с геометрией. Или уровень поделок в детском саду: как сделать окошки в домике, вырезать или наклеить поверх.

Но дело ваше, конечно.

Почему текст выходит за рамки заданного блока?

Я задал ширину и высоту блока, в который помешаю текст, так почему текст выходит за его пределы?

Очевидно, потому что вы не сказали что ему делать, если он не поместился.
За это отвечает свойство overflow

Внутренняя сетка блоков, которая только внутри, делим красиво блоки, как реализовывать правильно?

Антон Вебсайтовский, в данном случаи проще удалить вопрос, потому что он банален.