aqua.77 2 Жалоба Опубликовано: 23 ноября, 2016 Как применить к этому селектору .q1 li:first-child .q2 li:hover Ещё один псевдоэлемент :not(.q77 li)? Если писать .q1 li:first-child .q2 li:hover:not(.q77 li) То этот селектор вообще перестаёт работать Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 SelenIT 983 Жалоба Опубликовано: 25 ноября, 2016 11 час назад, radioactive сказал: работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not Не обязательно, :not(.что-то) без указания тега равнозначно *:not(.что-то), соответствует любому тегу, не имеющему класса .что-то. 9 минут назад, aqua.77 сказал: Это потому что .q77 потомок ul? По сути да. Между .q1 и целевым li, кроме ul.q77, есть еще один ul — .q2. Поэтому формально условие селектора «внутри какого-нибудь ul без класса .q77, находящегося внутри .q1» выполняется. Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 radioactive 23 Жалоба Опубликовано: 23 ноября, 2016 (изменено) Эм .q1 li:first-child .q2 li:hover:not(.q77) .q1 li:first-child .q2 li:hover:not(.q77) li Изменено 23 ноября, 2016 пользователем radioactive Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 23 ноября, 2016 1 час назад, radioactive сказал: .q1 li:first-child .q2 li:hover:not(.q77) li Нет Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 radioactive 23 Жалоба Опубликовано: 23 ноября, 2016 Селекторы потомки в комбинации с :not не применяются, если мой вариант не подходит то покажите более расширенный вариант html кода, разместите его на jsfiddle.net и опишите что нужно сделать, я посмотрю как решить вашу проблему Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 spartak9871 2 Жалоба Опубликовано: 23 ноября, 2016 q1 li:first-child .q2 li.q77:not(:hover) Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 10 часов назад, radioactive сказал: jsfiddle.net и опишите что нужно сделать Хорошо, там просто код длинный, а проблема только из-за одной строчки вот https://jsfiddle.net/sr5znzrw/ На 94 строке к элементу списка li применяется правое выравнивание, но из-за этого при наведении вложенный элемент списка тоже получает это значение 172 строка. Как я говорил код длинный и неудобный, удачи 7 часов назад, spartak9871 сказал: q1 li:first-child .q2 li.q77:not(:hover) Эмм... близко но нет.) Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 SelenIT 983 Жалоба Опубликовано: 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 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 radioactive 23 Жалоба Опубликовано: 24 ноября, 2016 (изменено) во первых вы применяете превдокласс :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> также проблему можно было бы решить отношением применяемых стилей к непосредственно дочерним элементам, знаком ">", поиграйтесь если есть желание и код не чуть не длинныйИзменено 24 ноября, 2016 пользователем radioactive 1 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 1 час назад, radioactive сказал: дочерним элементам, знаком ">" Да кстати можно просто этим ">" символом всё решить) Добавить его, чтобы селектор применялся непосредственно к дочернему li и не задевал остальные. Тогда и ненужно писать исключения типа :not(...). 1 час назад, SelenIT сказал: Во-первых, это не псевдоэлементы, а псевдоклассы. Да, я в толк не могу взять как они различаются... Можно ели есть возможность ссылку на источник с разъяснениями этих понятий? Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 spartak9871 2 Жалоба Опубликовано: 24 ноября, 2016 (изменено) не знаю может будит полезным Псевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях. Псевдоэлементы – это селекторы, которые определяют областьэлементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS. Ключевое отличие между ними в том, что псевдоклассы определяют именно состояние элементов, которые уже существуют на странице, а псевдоэлементы создают области (искусственные элементы), которых изначально на веб-странице не было. Но и те и другие отсутствуют в исходном коде документа. https://htmlacademy.ru/courses/57/run/2 https://webref.ru/cssИзменено 24 ноября, 2016 пользователем spartak9871 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 SelenIT 983 Жалоба Опубликовано: 24 ноября, 2016 Другими словами, псевдоклассы — это как бы классы (но не классы) для существующих элементов. А псевдоэлементы — это как бы элементы (но не элементы) помимо существующих элементов. В будущем стандарте будет чуть сложнее, но общий принцип тот же:) Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 8 часов назад, radioactive сказал: во первых вы применяете превдокласс :not к тегу li.q77 хотя класс .q77 присвоен тегу ul ! Нет, с чего вы взяли? я применяю li который находится в ul.q77 :not(.q77 li) Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 (изменено) 8 часов назад, radioactive сказал: Селекторы потомки в комбинации с :not не применяются Я вроде применил вот .q1 li:first-child .q2 li:not(.q77 li) потомок это .q77 liИзменено 24 ноября, 2016 пользователем aqua.77 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 radioactive 23 Жалоба Опубликовано: 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 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 (изменено) 1 час назад, radioactive сказал: И как? работает? запись li:not(.q77 li) неправильная, в скобках нельзя указывать потомок псевдокласс :not применяется к тегу li который выделен зеленым выше, это как li.q77 только наоборот, есть у вас в коде li.q77 ? вот мини демо https://jsfiddle.net/9Ljrv9of Всё всё понятно.Изменено 24 ноября, 2016 пользователем aqua.77 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 10 часов назад, SelenIT сказал: .q1 li:first-child .q2 :not(.q77) li:hover Ваш пример должен работать по логики вещей, этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77. Но почему то проблема осталась(нет саму проблему я решил просто интересно почему этот селектор не работает). Селектор на строке 94 https://jsfiddle.net/cz8pz484/ Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 radioactive 23 Жалоба Опубликовано: 24 ноября, 2016 (изменено) 34 минуты назад, aqua.77 сказал: этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77. нет, применяться не будет т.к стоит пробел между q2 и q77 - ".q2 :not(.q77)" - q77 всего лишь потомок q2 и работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not то есть вот .q1 li:first-child .q2 ul:not(.q77) li:hover Изменено 24 ноября, 2016 пользователем radioactive 1 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 24 ноября, 2016 2 часа назад, radioactive сказал: то есть вот Вот и я думаю, у вас абсолютно правильный селектор, но не работает. Я даже так сделал .q1 li:first-child ul:not(.q77) li:hover. https://jsfiddle.net/cz8pz484/1/ Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 radioactive 23 Жалоба Опубликовано: 24 ноября, 2016 (изменено) 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 строка, вовсе этот блок стилей удалить Изменено 24 ноября, 2016 пользователем radioactive 1 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 25 ноября, 2016 22 часа назад, SelenIT сказал: Смысл записи Вот селектор который гласит .q1 ul:not(.q77) li:hover: LI находящийся во всех UL кроме того что с классом .q77. Соответственно почему к LI который находится в .q77 всё ровно применяется правое выравнивание? https://jsfiddle.net/cz8pz484/3/ строка 94. (я уже сам замучился) Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 aqua.77 2 Жалоба Опубликовано: 25 ноября, 2016 1 час назад, aqua.77 сказал: .q1 ul:not(.q77) li:hover Это потому что .q77 потомок ul? Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
Как применить к этому селектору
Ещё один псевдоэлемент :not(.q77 li)? Если писать
То этот селектор вообще перестаёт работать
Поделиться сообщением
Ссылка на сообщение
Поделиться на других сайтах