«Родительский селектор» :has() — в реальность!
Радостная весть от Igalia (компании, подарившей нам гриды во всех основных движках и не только): сегодня они объявили о начале экспериментальной реализации в движке Blink одной из самых долгожданных фич CSS — псевдокласса :has() !
О :has() часто говорят как о «родительском селекторе», поскольку главная задача, где он нужен — разное оформление элементов в зависимости от их содержимого. Но он «умеет» выбирать не только предков, но и предыдущих соседей элемента, и не только. Потребность в таком селекторе очень давняя, не зря он давно есть в jQuery. Но в CSS-стандарты его долго «не пускали» опасения насчет производительности. Из-за них редакторы спецификации CSS-селекторов выделили было его в отдельный «статичный профиль», доступный только для скриптовых API типа querySelector , но не для оформления. А раз его нельзя использовать там, где он больше всего нужен, браузерам не было смысла возиться с его реализацией.
В 2019 году это досадное ограничение убрали. За это время браузеры накопили немало опыта в поддержке сложных CSS-селекторов (таких как :is и :where ) и во всевозможных внутренних трюках для их ускорения. Самое время хотя бы попробовать — может, для современных браузеров и :has() не так уж страшен?
Подробнее о новом селекторе и работе над его реализацией можно прочитать в свежей статье Брайана Карделла.
Пожелаем же успеха команде Igalia! Пусть всё получится, другие браузеры смогут перенять опыт, и веб-разработчики получат новый долгожданный удобный инструмент. И воспользуемся моментом, чтобы напомнить о другой полезной возможности CSS-селекторов 4 уровня — :nth-child(An + B of ) , позволяющей выбирать энный по счету элемент с определенным классом и не только — о которой разработчики браузеров почему-то всё время забывают, хотя в Safari она реализована еще 6 лет назад…
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
Источник
Что нового в CSS селекторах 4-го уровня?
Это перевод поста «What’s new in CSS selectors 4». Он показался мне интересным, и я решил перенести его на хабрахабр. P.S. Это мой первый перевод, не судите строго, и если увидите какие-то недочёты и ошибки — напишите пожалуйста в личку, я постараюсь исправить ошибки. Далее, со слов автора.
Пожалуйста, имейте ввиду, что данная статья описывает черновой вариант спецификации на январь 2015 года, что значит, что информация, изложенная в статье, без предупреждения может быть изменена.
CSS-селекторы четвёртого уровня — это следующее поколение спецификации CSS, последняя версия которой была выпущена в 2011 году, пробыв в течении нескольких лет в состоянии черновика.
Так что же нас ожидает нового?
ПРОФИЛИ СЕЛЕКТОРОВ
CSS-селекторы отныне разделены на две группы: быстрая и полная. Быстрые селекторы — это те селекторы, которые подходят для динамического CSS-движка. Полная группа селекторов подходит для использования в тех ситуациях, в которых быстрая выборка данных не настолько важна, например, при использовании их через document.querySelector.
Селекторы используются в множестве разнообразных контекстов, которые сильно отличаются по скоростным характеристикам. К сожалению, некоторые мощные селекторы слишком медленны для того, чтобы использовать их в чувствительных к производительности контекстах. Чтобы решить данную проблему, были созданы два профиля спецификаций селекторов. [источник]
:has — это одна из самых интересных частей спецификации CSS-селекторов четвёртого уровня, но она сопровождается важным предупреждением, о котором речь пойдёт ниже. Данный селектор позволяет указать, какие объекты должны присутствовать внутри указанного элемента, для того, чтобы это правило сработало по отношению к нему.
Это открывает большой простор для новых вариантов указания искомых элементов. Для примера, мы можем выбрать все секции, в которых присутствуют заголовки:
Другой вариант: разработчик может выбрать все параграфы, в которых присутствуют изображения, или, наоборот, присутствуют только элементы, которые не являются изображениями.
Можно даже выбрать те элементы, которые имеют определённое количество потомков (в данном примере, пять):
Предостережение: на данный момент, селектор :has не считается быстрым, что означает, что он может оказаться недоступен для использования в файлах стилей. Но, так как еще никто не реализовал на практике данный селектор, вопрос его производительности остаётся открытым. Если разработчики браузеров смогут сделать его реализацию быстрой, вполне возможно, что он будет доступен для использования как один из основных инструментов.
В предыдущей версии спецификации этот раздел был помечен восклицательным знаком и назывался «выбором субъекта селектора» — он имел другой синтаксис, который в настоящее время упразднён.
:MATCHES
:matches — это стандартизация :moz-any и :webkit-any, которая какое-то время присутствовала в браузерских префиксах. Это позволяет автору стиля объединить похожие правила. Например, это может быть полезно для объединения сгенерированного посредством SCSS/SASS вывода, вроде такого:
в несколько более поддающийся контролю вариант:
На приведённых выше страницах документации Mozilla присутствуют предостережения о его производительности. Так как этот селектор отныне станет стандартом, мы надеемся, что увидим результаты работы над его производительностью, которые помогут сделать его лёгким.
:NTH-CHILD(AN+B [OF S])
В то время как :nth-of-type существует с начала тысячелетия, CSS-селекторы четвёртого уровня добавляют возможность произвести фильтрацию, основанную на селекторе:
Селектор S используется для определения индекса, и он не зависит от селектора, находящегося слева от псевдо-класса. Как написано в спецификации, если вы заранее знаете тип элемента, селектор :nth-of-type может быть преобразован в :nth-child(… of S), подобно этому:
Разница между этим селектором и :nth-of-type небольшая, но она важна. Для :nth-of-type, каждый элемент — указали ли вы для него селектор, или же нет — имеет неявный индекс для себя среди своих собратьев с тем же именем тэга. Выражение :nth-child(n of S) создает новый счётчик каждый раз, когда вы используете новый селектор.
Это создаёт потенциал для возможных багов в новых селекторах. Так как селектор внутри псевдо-класса :nth-child не зависит от селектора слева от него, вы можете случайно пропустить часть вашего запроса, если укажете в левом селекторе всё как следует, но забудете указать всё необходимое внутри :nth-child. Например:
Данное правило может не работать так, как вы ожидаете от него, если другие не-tr элементы будут иметь атрибут «disabled».
В прошлой версии спецификации данная возможность называлась как селектор :nth-match.
В то время, когда вы использовали какое-то время :not, теперь вы можете перечислить внутри него несколько аргументов, чтобы сохранить несколько байт и ввести:
КОМБИНАТОР ПОТОМКОВ (>>)
Комбинатор потомков присутствует в CSS с самого начала в виде пробела ( ), но теперь он имеет явную версию:
Причина добавления данного правила заключается в организации моста между прямым потомком (>) и оператором для прозрачного DOM (>>>).
КОМБИНАТОР СТОЛБЦА (||) И :NTH-COLUMN
CSS-селекторы четвёртого уровня добавляют операции со столбцами, которые позволяют разработчикам стилей более простым способом изменять дизайн определённых столбцов в таблице. Текущий подход в задании стилей для таблиц требует использования :nth-child, который не всегда совпадает со столбцами таблиц при использовании атрибутов colspan.
При использовании нового комбинатора столбца, вы можете задать стиль ячейкам таблицы, которые находятся в том же столбце, что и заданный элемент col:
Как альтернативный вариант, автор может использовать :nth-column и :nth-last-column для задания стилей ячейкам. В любом случае, если ячейка охватывает несколько столбцов, этот селектор затронет любой из них.
:PLACEHOLDER-SHOWN
Одно небольшое дополнение к языку селектора — это :placeholder-shown. Он соответствует input-элементу, если и только если он отображает текст из своего placeholder-атрибута.
:ANY-LINK
:any-link — это еще одно маленькое дополнение. Оно объявлено для соответствия любому из свойств :link или :visited.
ВЫВОДЫ
CSS-селекторы четвёртого уровня всё ещё находятся в разработке, но уже сейчас там есть полезные селекторы, которые мы рассмотрели, и которые могут предложить разработчикам новые модели и инструменты для задания стилей. В спецификации имеются и другие новые селекторы, которые не были рассмотрены мною (автором статьи — прим. пер.) в данной статье, связанные с доступностью, валидацией данных, а также с атрибутами scoped в элементах style.
Если у вас возникло желание поиграться с данными селекторами, вы должны дождаться, пока разработчики браузеров догонят спецификацию, или использовать некоторые ранние реализации. :matches доступна как :moz-any и :webkit-any, а ночные сборки WebKit’а имеют раннюю поддержку :nth-child селекторов через активацию по флагу.
Поскольку это черновой вариант, наименования псевдоклассов могут измениться без предупреждения. Следите за спецификациями для получения более подробной информации.
Источник
Не подключается css к html. как исправить ошибку?
Подскажите плз,в чем может быть причина?
делал все как на видео
в файле css проверил все сохранилось
тип документа тоже проверял
Похожие вопросы
9 ответов
Попробуйте такие варианты:
1. Проверьте, что файл style.css точно существует (в браузере нажмите на ctr + u и нажмите на название файла и физически в папке проверьте, что файл style.css есть), а также проверьте, что все символы в английской раскладке клавиатуры
2. Попробуйте поставить слеш так:
- файл проверил он есть (когда выполнил действие в браузере открылся файл этот)
- слеш поставил но не получилось получилось (т.е после того как поставил слеш заголовок сайта поднялся в самый вверх, когда его убрал, заголовок спустился чуть ниже, значит ссылка правильная
.header<
background-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
>
.main, .logo, .menubar, .size_content, .foother,<
margin-left: auto;
margin-right: auto;
>
.logo<
width: 880px;
padding-bottom: 40px;
>
так выглядит файл style.css
Если файл style.css с кодом открылся в браузере, значит style.css корректно подключен.
Приложите коды файлов index.html и style.css полностью, попробую помочь.
У вас опечатки в коде есть.
Так не пишут, либо так нужно писать:
и если header как тег использовать, в css стилях без точки нужно будет писать к нему стили.
Такие еще опечатки есть:
Во первых нужно писать footer, а не foother, во вторых после последнего класса не должно быть запятых.
Глубже не смотрел код.
Спасибо,вы помогли постараюсь быть внимательнее
Тема открыта год назад, но как актуальна. Спасибо за ответ с ctrl+u
Источник
Селектор :has() станет доступен для оформления?
Родительский селектор, т.е. возможность стилизовать элементы в зависимости от их содержимого — давняя, но пока несбыточная мечта многих верстальщиков. Предложения такого селектора, в том или ином виде, бродят по черновикам W3C с начала двухтысячных. Но он получается очень ресурсоемким и медленным. Поэтому в черновике модуля CSS-селекторов 4 уровня изначально селекторы делились по «профилям»: «живой», отражающий состояние интерфейса в реальном времени и используемый для оформления, и «мгновенный снимок» (ранее «статичный»), для одного конкретного момента и доступный только в JS-методах типа querySelector() . До последнего времени селектор :has() был единственным исключением из «живого» профиля. Что значило, что даже когда (и если) браузеры его реализуют, использовать его для оформления будет нельзя.
Многим, включая меня, это ограничение всегда казалось нелепым. И вот наконец на днях Элика Этемад (fantasai), создательница множества CSS-спецификаций, включая селекторы, обратила внимание на эту проблему и предложила Рабочей группе CSS обсудить ее.
Fantasai отыскала единственную на сегодня реализацию :has() — это оказался Prince, инструмент для экспорта вёрстки в PDF (выше был скриншот его документации). И используется он там именно для оформления. А вот для querySelector() и т.п. за все годы идеи «профилей» его так нигде и не реализовали. По-моему, это было предсказуемо: если селектор нельзя использовать там, где он больше всего нужен, какой смысл браузерам возиться с ним?
И вот на очередном телесовещании Рабочая группа CSS наконец скрепя сердце признала эту реальность и отказалась от идеи «профилей». Правда, вместо этого селектор :has() сделали «необязательным» (т.е. браузер может считаться формально соответствующим стандарту и без его поддержки). Но главное, на мой взгляд, то, что снят «запрет» на использование его для оформления. Так что шансов, что за его реализацию всё-таки возьмутся, по-моему стало больше. Тем более что за эти годы селекторы в браузерах вообще основательно ускорились, так что проблема скорости может оказаться не такой уж фатальной!
Кстати, за последний месяц Рабочая группа CSS успела порадовать нас двумя кандидатами в рекомендации — обновленным модулем CSS-изоляции (CSS Containment Level 1) и впервые «дозревшими» до этого статуса функциями плавности (CSS Easing Functions Level 1), которые отныне действуют не только во времени, но и в пространстве, и применимы не только для анимаций/переходов, но и для градиентов. А также обновленным черновиком модуля списков (CSS Lists Module Level 3) с долгожданным контролем над стилем и положением списочного маркера (и не только). И абсолютной новинкой — первым черновиком модуля пространственной навигации (CSS Spatial Navigation Level 1), отвечающим за поведение сложных двумерных интерфейсов при навигации стрелками клавиатуры и обещающим избавить разработчиков от массы головной боли по поводу доступности. Следите за новостями CSS вместе с нами!
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
Источник