aqua.77 Posted November 23, 2016 Report Share Posted November 23, 2016 Как применить к этому селектору .q1 li:first-child .q2 li:hover Ещё один псевдоэлемент :not(.q77 li)? Если писать .q1 li:first-child .q2 li:hover:not(.q77 li) То этот селектор вообще перестаёт работать Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted November 25, 2016 Report Share Posted November 25, 2016 11 час назад, radioactive сказал: работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not Не обязательно, :not(.что-то) без указания тега равнозначно *:not(.что-то), соответствует любому тегу, не имеющему класса .что-то. 9 минут назад, aqua.77 сказал: Это потому что .q77 потомок ul? По сути да. Между .q1 и целевым li, кроме ul.q77, есть еще один ul — .q2. Поэтому формально условие селектора «внутри какого-нибудь ul без класса .q77, находящегося внутри .q1» выполняется. Quote Link to comment Share on other sites More sharing options...
0 radioactive Posted November 23, 2016 Report Share Posted November 23, 2016 (edited) Эм .q1 li:first-child .q2 li:hover:not(.q77) .q1 li:first-child .q2 li:hover:not(.q77) li Edited November 23, 2016 by radioactive Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 23, 2016 Author Report Share Posted November 23, 2016 1 час назад, radioactive сказал: .q1 li:first-child .q2 li:hover:not(.q77) li Нет Quote Link to comment Share on other sites More sharing options...
0 radioactive Posted November 23, 2016 Report Share Posted November 23, 2016 Селекторы потомки в комбинации с :not не применяются, если мой вариант не подходит то покажите более расширенный вариант html кода, разместите его на jsfiddle.net и опишите что нужно сделать, я посмотрю как решить вашу проблему Quote Link to comment Share on other sites More sharing options...
0 spartak9871 Posted November 23, 2016 Report Share Posted November 23, 2016 q1 li:first-child .q2 li.q77:not(:hover) Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 10 часов назад, radioactive сказал: jsfiddle.net и опишите что нужно сделать Хорошо, там просто код длинный, а проблема только из-за одной строчки вот https://jsfiddle.net/sr5znzrw/ На 94 строке к элементу списка li применяется правое выравнивание, но из-за этого при наведении вложенный элемент списка тоже получает это значение 172 строка. Как я говорил код длинный и неудобный, удачи 7 часов назад, spartak9871 сказал: q1 li:first-child .q2 li.q77:not(:hover) Эмм... близко но нет.) Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted November 24, 2016 Report Share Posted November 24, 2016 Во-первых, это не псевдоэлементы, а псевдоклассы. Их может быть много, но любой псевдокласс применяется к тому элементу, для которого написан. Во-вторых, :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 */ } Но еще лучше по возможности не привязываться ко вложенности тегов вообще. Тем более тут всё равно ведь для каждого уровня меню задействован свой класс. 1 Quote Link to comment Share on other sites More sharing options...
0 radioactive Posted November 24, 2016 Report Share Posted November 24, 2016 (edited) во первых вы применяете превдокласс :not к тегу li.q77 хотя класс .q77 присвоен тегу ul ! во вторых как я сказал раньше - Селекторы потомки в комбинации с :not не применяются вы не до конца выучили область применения этого псевдокласса по проблеме, я еле нашел ее), столь многоуровневые меню я не видел давно если я правильно понял то вот https://jsfiddle.net/sr5znzrw/1/ css изменил только 94 строку, сделал концовку как li:hover:not(.not) из этого правила следует что стили, будут применятся при наведении всем тегам li - кроме ! тегов li с классом .not <li class="not"><a href="#">333</a></li> также проблему можно было бы решить отношением применяемых стилей к непосредственно дочерним элементам, знаком ">", поиграйтесь если есть желание и код не чуть не длинный Edited November 24, 2016 by radioactive 1 Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 1 час назад, radioactive сказал: дочерним элементам, знаком ">" Да кстати можно просто этим ">" символом всё решить) Добавить его, чтобы селектор применялся непосредственно к дочернему li и не задевал остальные. Тогда и ненужно писать исключения типа :not(...). 1 час назад, SelenIT сказал: Во-первых, это не псевдоэлементы, а псевдоклассы. Да, я в толк не могу взять как они различаются... Можно ели есть возможность ссылку на источник с разъяснениями этих понятий? Quote Link to comment Share on other sites More sharing options...
0 spartak9871 Posted November 24, 2016 Report Share Posted November 24, 2016 (edited) не знаю может будит полезным Псевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях. Псевдоэлементы – это селекторы, которые определяют областьэлементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS. Ключевое отличие между ними в том, что псевдоклассы определяют именно состояние элементов, которые уже существуют на странице, а псевдоэлементы создают области (искусственные элементы), которых изначально на веб-странице не было. Но и те и другие отсутствуют в исходном коде документа. https://htmlacademy.ru/courses/57/run/2 https://webref.ru/css Edited November 24, 2016 by spartak9871 Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted November 24, 2016 Report Share Posted November 24, 2016 Другими словами, псевдоклассы — это как бы классы (но не классы) для существующих элементов. А псевдоэлементы — это как бы элементы (но не элементы) помимо существующих элементов. В будущем стандарте будет чуть сложнее, но общий принцип тот же:) Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 8 часов назад, radioactive сказал: во первых вы применяете превдокласс :not к тегу li.q77 хотя класс .q77 присвоен тегу ul ! Нет, с чего вы взяли? я применяю li который находится в ul.q77 :not(.q77 li) Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 (edited) 8 часов назад, radioactive сказал: Селекторы потомки в комбинации с :not не применяются Я вроде применил вот .q1 li:first-child .q2 li:not(.q77 li) потомок это .q77 li Edited November 24, 2016 by aqua.77 Quote Link to comment Share on other sites More sharing options...
0 radioactive Posted November 24, 2016 Report Share Posted November 24, 2016 3 минуты назад, aqua.77 сказал: Я вроде применил вот .q1 li:first-child .q2 li:not(.q77 li) потомок это .q77 li И как? работает? запись li:not(.q77 li) неправильная, в скобках нельзя указывать потомок псевдокласс :not применяется к тегу li который выделен зеленым выше, это как li.q77 только наоборот, есть у вас в коде li.q77 ? вот мини демоhttps://jsfiddle.net/9Ljrv9of Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 (edited) 1 час назад, radioactive сказал: И как? работает? запись li:not(.q77 li) неправильная, в скобках нельзя указывать потомок псевдокласс :not применяется к тегу li который выделен зеленым выше, это как li.q77 только наоборот, есть у вас в коде li.q77 ? вот мини демоhttps://jsfiddle.net/9Ljrv9of Всё всё понятно. Edited November 24, 2016 by aqua.77 Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 10 часов назад, SelenIT сказал: .q1 li:first-child .q2 :not(.q77) li:hover Ваш пример должен работать по логики вещей, этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77. Но почему то проблема осталась(нет саму проблему я решил просто интересно почему этот селектор не работает). Селектор на строке 94 https://jsfiddle.net/cz8pz484/ Quote Link to comment Share on other sites More sharing options...
0 radioactive Posted November 24, 2016 Report Share Posted November 24, 2016 (edited) 34 минуты назад, aqua.77 сказал: этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77. нет, применяться не будет т.к стоит пробел между q2 и q77 - ".q2 :not(.q77)" - q77 всего лишь потомок q2 и работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not то есть вот .q1 li:first-child .q2 ul:not(.q77) li:hover Edited November 24, 2016 by radioactive 1 Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 24, 2016 Author Report Share Posted November 24, 2016 2 часа назад, radioactive сказал: то есть вот Вот и я думаю, у вас абсолютно правильный селектор, но не работает. Я даже так сделал .q1 li:first-child ul:not(.q77) li:hover. https://jsfiddle.net/cz8pz484/1/ Quote Link to comment Share on other sites More sharing options...
0 radioactive Posted November 24, 2016 Report Share Posted November 24, 2016 (edited) 19 минут назад, aqua.77 сказал: Вот и я думаю, у вас абсолютно правильный селектор, но не работает. Я даже так сделал .q1 li:first-child ul:not(.q77) li:hover. https://jsfiddle.net/cz8pz484/1/ не работает потому что .q1 li:first-child нужный q77 вы ищите только в первых тегах списка li (код выше) будто li:first-child li:first-child li:first-child li:first-child ul:not(.q77) но еще можно сделать так .q1 li:first-child li ul:not(.q77) тогда будет работать либо еще проще https://jsfiddle.net/cz8pz484/2/ 113 строка, вовсе этот блок стилей удалить Edited November 24, 2016 by radioactive 1 Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 25, 2016 Author Report Share Posted November 25, 2016 22 часа назад, SelenIT сказал: Смысл записи Вот селектор который гласит .q1 ul:not(.q77) li:hover: LI находящийся во всех UL кроме того что с классом .q77. Соответственно почему к LI который находится в .q77 всё ровно применяется правое выравнивание? https://jsfiddle.net/cz8pz484/3/ строка 94. (я уже сам замучился) Quote Link to comment Share on other sites More sharing options...
0 aqua.77 Posted November 25, 2016 Author Report Share Posted November 25, 2016 1 час назад, aqua.77 сказал: .q1 ul:not(.q77) li:hover Это потому что .q77 потомок ul? Quote Link to comment Share on other sites More sharing options...
Question
aqua.77
Как применить к этому селектору
Ещё один псевдоэлемент :not(.q77 li)? Если писать
То этот селектор вообще перестаёт работать
Link to comment
Share on other sites
21 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.