SelenIT

Точнее, :not как раз не игнорируется, просто селектор становится бессмысленным и ничего не выбирает (хотя формально валиден). Такие заведомо ничего не затрагивающие, но формально валидные фиктивные селекторы могут быть полезны в хаках для конкретных браузеров, типа #hack:not(#hack):-moz-any-link, .my-selector { /* стили применятся только в браузерах, понимающих :-moz-any-link, т.е. в Мозилле */ }

Не обязательно, :not(.что-то) без указания тега равнозначно *:not(.что-то), соответствует любому тегу, не имеющему класса .что-то. По сути да. Между .q1 и целевым li, кроме ul.q77, есть еще один ul — .q2. Поэтому формально условие селектора «внутри какого-нибудь ul без класса .q77, находящегося внутри .q1» выполняется.

Возможно, испорченный телефон донес обрывок разговора, касающегося экстремальной оптимизации анимаций и прочего, типа такого. А вообще для новых проектов рекомендуют флексбокс, в том числе по соображениям скорости (к сожалению, русская версия документа по ссылке сильно отдает «надмозгом», по возможности лучше читать оригинал). Ближайшей весной в большинстве браузеров станет доступна грид-раскладка, так что есть смысл уже сейчас ее осваивать. А насчет адаптивного и отзывчивого неплохо разъясняется в этой статье. Но на практике, по-моему, этими тонкостями сейчас меньше заморачиваются. Главное, чтобы для как можно большего количества пользователей информация оставалась доступной, а интерфейс юзабельным, а уж какими средствами это достигается — вопрос второстепенный. Кстати, доступность (ARIA-атрибуты и т.п.) — тоже довольно актуальный тренд.

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

Во-первых, это не псевдоэлементы, а псевдоклассы. Их может быть много, но любой псевдокласс применяется к тому элементу, для которого написан. Во-вторых, :not() в CSS Selectors 3 и большинстве браузеров принимает только простой селектор (т.е. либо один тег, либо один класс, либо один псевдокласс, либо один id). Сложные селекторы в :not() появились только в CSS Selectors 4 и работают пока только в Safari 9+. Смысл записи .q1 li:first-child .q2 li:hover:not(.q77 li) я понимаю как "элемент li под курсором, находящийся где угодно внутри элемента с классом q2, находящегося где угодно внутри первого элемента li где угодно внутри элемента с классом q1, и при этом не имеющего предка с классом q77". Для частного случая в примере, когда .q77 появляется внутри .q2 (т.е. стиль должен применяться к любым li внутри .q2, кроме ), можно сделать что-то типа такого: .q1 li:first-child .q2 > li:hover, .q1 li:first-child .q2 :not(.q77) li:hover { /* стили для li непосредственно в .q2 или через любые прослойки, кроме .q77 */ Если же обертка с классом .q77 может быть где угодно на любом уровне, то всё сложно. Нужно или явно перечислить все возможные варианты вложенности с ее участием, или вообще сделать иначе. Например, искусственно поднять специфичность подобным хаком: .q77 li:not(#non-existent-ID) { /* хак для поднятия специфичности выше любой комбинации классов, но ниже !important */ /* переопределяем обратно на обычные стили для li */ } Но еще лучше по возможности не привязываться ко вложенности тегов вообще. Тем более тут всё равно ведь для каждого уровня меню задействован свой класс.

Да, является.

Так противоречие между разными свойствами. Само по себе одновременное указание left и right ничему не противоречит, элемент просто будет растянут так, чтобы его края были в указанных местах. Но вот если при этом указана ещё и ширина — вот тут уже возникает противоречие. В примере с цветом именно переопределяется одно и то же свойство, но ведь смена цвета background-color в более специфичном селекторе не повлияет на цвет текста — так и тут. Специфичность — она у селекторов, а не у свойств. Она определяет, какие значения свойств вообще дойдут до элемента. Но те, что дошли, уже равноправны и «не помнят», от каких селекторов они элементу достались. И конфликты между ними разруливаются на общих основаниях.

Момент противоречия. Когда вы требуете, чтобы у абзаца левый край был прижат к краю контейнера, ширина была 50px (через стили для всех абзацев) И при этом правый край тоже был прижат к краю контейнера (через более специфичный стиль) — при ширине контейнера, отличной от 50px, выполнить все 3 требования невозможно. Чем-то одним приходится пренебречь. Авторы CSS-стандарта решили, что пренебречь следует указанием right…

Когда-то давно один мой знакомый пытался популярно описать это свойство на хабре, но с тех пор много воды утекло и спек поменялось, поэтому та писанина доступна только в архиве. Но вдруг для чего-нибудь пригодится :).

Странный код. 100% ширины для body плюс горизонтальные padding-и по 40px — разве это не приводит к гориз. скроллингу? Или где-то еще (в reset.css или чем-то подобном) спрятан * { box-sizing: border-box }? Конструкция html, body { height: 100% } обычно используется именно для высоты — высота наследуется только от явно указанной высоты предка и без этих звеньев цепочки высоту окна браузера «не донести» до внутренних оберток (что бывает нужно для прибитого футера). Сейчас, когда можно задать height:100vh непосредственно нужному элементу, она нужна реже. Но смысла делать так для ширины я вообще не вижу, блоки ведь занимают всю доступную ширину предка по умолчанию.

Нет, при vertical-align: top или bottom базовая линия инлайн-блока вообще «отвязывается» от внешней базовой линии, и инлайн-блок прижимается к соответствующей (верхней или нижней) границе контейнера строки (лайн-бокса).

Общий лайн-бокс (контейнер строки, содержащей оба инлайн-блока) всё же растянулся-таки. Чтоб вместить нижнюю часть первого инлайн-блока + с его нижним margin-ом и верхнюю часть второго инлайн-блока с его верхним margin-ом.

Подсвеченное несовпадение текста наводит на смешную мысль — может, они просто хотят пробел после знаков больше/меньше?

Бывает, но не на всех платформах.

Да, так. Эту и еще 4 базовые подстановки знают все версии HTML и XML. Числовые подстановки лучше использовать для всякой экзотики. Может, попробовать убрать div-обертку — вдруг они оценивают еще и минимализм кода? Или, наоборот, добавить явные thead и tbody?

Заявление не проходит проверку опытом Ну и про кодировку выше верно заметили. Еще бы неплохо lang="ru" для HTML указать, имхо...

Возможно, поможет этот материал, ну и этот (с продолжениями).

Vertical-align выравнивает элементы строчного уровня в строке. Либо в ячейке таблицы. Но не в блоке (а инлайн-блок изнутри ведет себя как блок). Может выровнять, если поставить диву line-height: 500px (т.е. на всю высоту, но тогда будет плохо, если появится вторая строка). Другой вариант — вместо vertical-align поменять ему display на inline-flex и добавить align-items: flex-end (но тогда потомок станет уже не инлайн-блоком, а флекс-элементом, иногда это дает побочные эффекты). А какова конечная задача, если не секрет?

Проблема со словом «пост» не в том, что оно нерусское, а как раз в том, что в русском у него уже есть другие значения (наблюдательный пост, рождественский пост и т.д.). Религиозные коннотации особенно значимы для некоторых, отсюда и варианты спешной замены типа приснопамятной «блогозаписи»у небезызвестного Мицгола . У «блога» как раз значение однозначное (хотя на слух его можно спутать с блоком, а то и блохами ).

Код "background: linear-gradient(90deg, #E3EBF4 10%, #D7D6DB 90%);" рабочий, я только что проверил. Скорее всего, проблема была где-то в другом месте. Значения цветов в градиенте могут быть любыми.

Заметка в блоге? Запись в блоге?

В обновленном примере так и сделано, целиком прозрачная средняя часть вместо фона, за это отвечает "fill" после значений «нарезки».

Так зачем отказываться? border-image же всё нужное уже умеет, кажется? Ну не сказал бы...

Так всё практически хорошо, осталась пара сущих мелочей же!

ЕМНИП, IE6 не передавал клик по label на сам контрол без id/for, возможно, с тех времен осталась перестраховка. А option без value может быть (тогда передается текст выбранной опции), но вот name для select, конечно, нужен.