Rustam Bainazarov

Дополню, что можно ещё использовать вот такой хак, если нужно не менять габариты (padding и другие манипуляции их увеличивают), но при этом увеличить зону действия элемента:



Да, я сам дошёл до такого полезного и смешного костыля. Удобно использовать с мелкими единичными кнопками, у которых нужно сохранить небольшие габариты, но увеличить зону действия. Ну и т. п.

Когда вы применили :hover к нужному элементу, это не значит, что именно у него будут показаны стили дочерних элементов. На примере div:hover a — после выбора состояния :hover для родителя нужно выбрать именно a, потому что стили применяются именно к нему, несмотря на то, что они идут от :hover родителя (что, чёрт, логично).

Нет. На уровень выше CSS идти не умеет.

В невнятном по отдаленности будущем будет вот такая штука:

div:has(span) {
 ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Когда-то там, но не сейчас. Поэтому ответ — нет, такого селектора на данный момент нет в CSS. К огромному сожалению, кстати.

UPDATE. Данный селектор работает в блокираторе рекламы uBlock, но это не CSS. Там (в uBlock) есть :if, :has, :has-text и т. п. — такого в CSS отродясь не было, т. е. это просто имитация синтаксиса CSS для удобства восприятия и создания правил.

То есть, в данном конкретном случае синтаксис чернового варианта официальной нереализованной спецификации CSS попросту совпал с инструментом данного плагина, поэтому он и сработал там.

* {
  -webkit-tap-highlight-color: transparent;
}

Можете вместо * использовать более точечный селектор.

Правило в CSS закрывается без точки с запятой:

.class {
   color: #fff;
} /* Тут не надо точки с запятой, точнее, он тут запрещен, ибо он будет всё ломать в последующем правиле */

Собственно, из-за этого и не красилась ваша кнопка. Все стили применяются, если исправите ошибку:



Ещё ошибка. Так нельзя:
<div class = "wrapper"></div>

Вот так надо:
<div class="wrapper"></div>

Ну ОК, конечно, но:
1. Я не понимаю, почему надо везде использовать Bootstrap и страдать, когда что-то внезапно на нем не выходит.
2. Я не понимаю, почему нельзя посмотреть код того, как сделано это на самом сайте «Юлы».

А-ля так:

https://medium.com/@hugodesigns/how-to-create-appl...

$('.items').click(function(){
    $(this).find('.item').css('display', 'none'); 
});

https://youtu.be/rtiK6iblU1I

https://youtu.be/E-km1doyxTg

P. S. Да, это не плагин, но для этой цели лучше сделать так, ибо зачем ставить плагин и в целом нагружать этим back-end.

Запрос в поиске:
Halftone Effect или Dotted Halftone Effect

Пример видео на тему:
https://youtu.be/usDDwwraaRk

Тут и CSS хватит (анимирование stroke-dashoffset), JS в этом примере отвечает только за вывод значения счётчика внутри круга:


Оригинал:
https://codepen.io/zebateira/pen/VvqJwm

Поиск по запросу:
https://www.google.com/search?q=svg+timer+circle&o...

Смените сложность вопроса на «лёгкую», это базовые свойства CSS.

Если нужно фиксировать на экране, то position: fixed + viewport-единицы (можно тупо в процентах в данном случае, ибо позиционируем относительно окна):


Если без фиксации при прокрутке и внутри любого блока, то тут уже обязательно viewport-единицы, чтобы не зависеть от обёртки и брать размеры прямо у окна браузера:


Учтите, что viewport-единицы в мобильных браузерах (Chrome Android и iOS Safari) со схлопываемыми (косое слово, да) панелями учитывают размер окна без учёта этих панелей в раскрытом состоянии, поэтому они могут перекрывать этот блок, пока не будут скрыты/сжаты.

Вот так надо:


Вот эти 3 атрибута для тега video:
playsinline muted autoplay

Компилирую ответ.

Это внутренний размер буквы. Прописано в шрифте при его разработке, это нормально.

Если так критично, то отрицательный margin с em вас спасёт:


Источник решения:
https://stackoverflow.com/questions/28809771/left-...

Ошибка указывает на то, что внутри тега label может только один button, input, meter, output, progress, select, или textarea (на выбор).

Вот так неверно:

<label>
  <input type="search" class="search-field" placeholder="Поиск по сайту..." value="" name="s">
  <button class="search-submit search__pos"><i class="fa fa-search"></i></button>
</label>

А вот так верно:

<label>
  <input type="search" class="search-field" placeholder="Поиск по сайту..." value="" name="s">
</label>
<button class="search-submit search__pos"><i class="fa fa-search"></i></button>

Нужно четко в таком варианте определить размеры, четко определить шрифт и т. п. — чтобы не скакало. Ну и ограничить длину ввода в полях через JS.

UPDATE №1. Шрифт должен быть моноширинным.

UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

Потому что с чистыми inline-элементами (:before и :after являются оными изначально) не работает свойство transform. Поменяйте, к примеру, на inline-block, как я в примере, и все будет работать:

CSS тут бессилен в одиночку. Нужен ещё и SVG:
https://codepen.io/xgad/post/svg-radial-progress-meters

https://css-tricks.com/almanac/properties/o/oversc...

https://caniuse.com/#feat=css-overscroll-behavior

html, body {
    overscroll-behavior: none;
}

Будет работать только в современных браузерах. В Safari это не будет работать, к сожалению, там этот механизм не отключить.

Update. Убивает механизм «потянуть для обновления страницы» в Android Chrome.