Используя <datalist> можно сделать список подсказок, которые будут появляться по время ввода данных в input.

Выглядит так:

🗿 Вертикальное заполнение относительно ширины элемента, а не высоты
padding: 50% не добавляет отступ 50% от оригинальной высоты элемента, а добавляет 50% отступ от ширины родительского элемента.

Зная это, мы можем легко создавать чувствительные элементы, которые сохраняют соотношение высоты и ширины.

id > class
🗿 Идентификаторы стилей отменяют все стили классов. Это связано с тем, что идентификатор более точен, чем класс, аналогично «.foo.bar» будет отменяться только «.foo» или «.bar».

Инкрементный счетчик

Можно использовать свойство content: counter () для инкрементного подсчёта псевдо элементов:

Инкрементный счетчик

Можно использовать свойство content: counter () для инкрементного подсчёта псевдо элементов.

Font – это свойство-сокращение

«Font» — это свойство сокращения CSS. Поэтому вместо того, чтобы писать все свойства, вы можете просто объединить их все под одним.

👻 Советую хорошую книгу по освоению базы: Создание Web-страниц: HTML, CSS, JavaScript - Мархвида И.В.

@supports для проверки поддержки браузера

Можноиспользовать запрос функции @supports для проверки поддержки браузера. В качестве примера: можно использовать «display: flex» только тогда, когда он действительно поддерживается, его можно настроить так:

* (звездочка)

Можно вспомнить о селекторе *, но он часто недоиспользуется. Он назначает всем элементам на странице стили и великолепно подходит для создания сброса, а также создания стилей страницы по умолчанию, таких как нужные шрифты и размер.

A + B

Этот селектор называется смежным и выбирает тот элемент, который следует сразу за первым. Если нужно выбрать первый div после верхнего колонтитула, то можно написать:

A[href*="example"]

Это – действительно классный селектор, когда нужно немного по-иному назначить стили отдельной ссылке; то, что находится в кавычках, будет сопоставлено с href ссылки.
Есть еще версия без *, которая сопоставляет точный url, который можно использовать для точных ссылок.

A:nth-child(n)

Селектор nth-child – простой способ выбрать любой дочерний элемент по порядку. Если, к примеру, вам нужен третий элемент неупорядоченного списка, результат получится такой.

Можно применять nth-child для выбора каждого множителя числа, используя переменную n , например, если вставить 3n, он выберет номер элемента списка 3, 6, 9, 12 и так далее.

A:nth-last-child(n)

Селектор nth-last-child работает как nth-child, но вместо того, чтобы начать отсчет с первого элемента списка, он начинает считать с последнего, поэтому если вы примените его с числом два, он выберет тот элемент списка, который идет перед последним, и будет применяться как селектор nth-child.

A:nth-of-type(n)

Этот селектор делает следующее: смотрит, элемент какого вида вы поместили в него и выбирает, например, третий элемент на вашей странице, соответствующий тому, что вы написали. Для выбора третьего абзаца в div’е можно применить (см. фотку)

A:visited

Когда-нибудь обращали внимание на то, что при поиске чего-либо в google уже просмотренные вами страницы становятся другого цвета? Именно это делает селектор visited. Он – отличное дополнение для пользователей, но иногда о нем забывают и, судя по моему опыту, он очень удобен при поиске в google.

Классический CSS Clearfix

Данный код clearfix годами вращался в Сети в среде самых находчивых веб-разработчиков. Вам требуется применить этот класс к контейнеру, содержащему «плавающие» элементы. Так гарантируется, что любой последующий контент не станет свободно перемещаться, а будет помещен в стек и сброшен.

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}