• 0
aqua.77

Много псевдоэлементов в одном селекторе

    Вопрос

    aqua.77

    Как применить к этому селектору 

    .q1 li:first-child .q2 li:hover

    Ещё один псевдоэлемент :not(.q77 li)? Если писать 

    .q1 li:first-child .q2 li:hover:not(.q77 li)

    То этот селектор вообще перестаёт работать

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    21 ответ на этот вопрос

    Рекомендуемые сообщения

    • 0
    SelenIT
    11 час назад, radioactive сказал:

    работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not

    Не обязательно, :not(.что-то) без указания тега равнозначно *:not(.что-то), соответствует любому тегу, не имеющему класса .что-то.

    9 минут назад, aqua.77 сказал:

    Это потому что .q77 потомок ul?

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

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    radioactive

    Эм

    .q1 li:first-child .q2 li:hover:not(.q77)
    .q1 li:first-child .q2 li:hover:not(.q77) li

     

    Изменено пользователем radioactive

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    1 час назад, radioactive сказал:

    .q1 li:first-child .q2 li:hover:not(.q77) li

    Нет

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    radioactive

    Селекторы потомки в комбинации с :not не применяются, если мой вариант не подходит то покажите более расширенный вариант html кода, разместите его на jsfiddle.net и опишите что нужно сделать, я посмотрю как решить вашу проблему 

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    10 часов назад, radioactive сказал:

    jsfiddle.net и опишите что нужно сделать

    Хорошо, там просто код длинный, а проблема только из-за одной строчки вот https://jsfiddle.net/sr5znzrw/ На 94 строке к элементу списка li применяется правое выравнивание, но из-за этого при наведении вложенный элемент списка тоже получает это значение 172 строка. Как я говорил код длинный и неудобный, удачи:wacko:

    7 часов назад, spartak9871 сказал:

     

    q1 li:first-child .q2 li.q77:not(:hover)

     

    Эмм... близко но нет.)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    SelenIT

    Во-первых, это не псевдоэлементы, а псевдоклассы. Их может быть много, но любой псевдокласс применяется к тому элементу, для которого написан.

    Во-вторых, :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 */
    }

    Но еще лучше по возможности не привязываться ко вложенности тегов вообще. Тем более тут всё равно ведь для каждого уровня меню задействован свой класс.

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    radioactive

    во первых вы применяете превдокласс :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>


    также проблему можно было бы решить отношением применяемых стилей к непосредственно дочерним элементам, знаком ">", поиграйтесь если есть желание

    и код не чуть не длинный

    Изменено пользователем radioactive
    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    1 час назад, radioactive сказал:

    дочерним элементам, знаком ">"

    Да кстати можно просто этим ">" символом всё решить) Добавить его, чтобы селектор применялся непосредственно к дочернему li и не задевал остальные. Тогда и ненужно писать исключения типа :not(...).

    1 час назад, SelenIT сказал:

    Во-первых, это не псевдоэлементы, а псевдоклассы.

    Да, я в толк не могу взять как они различаются... Можно ели есть возможность ссылку на источник с разъяснениями этих понятий? 

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    spartak9871

    не знаю может будит полезным :unsure:

    Псевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях.

    Псевдоэлементы – это селекторы, которые определяют областьэлементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS.

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

    https://htmlacademy.ru/courses/57/run/2

    https://webref.ru/css

    Изменено пользователем spartak9871

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    SelenIT

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

    В будущем стандарте будет чуть сложнее, но общий принцип тот же:)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    8 часов назад, radioactive сказал:

    во первых вы применяете превдокласс :not к тегу li.q77
    хотя класс .q77 присвоен тегу ul !

    Нет, с чего вы взяли? я применяю li который находится в ul.q77 :not(.q77 li)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    8 часов назад, radioactive сказал:

    Селекторы потомки в комбинации с :not не применяются

    Я вроде применил вот .q1 li:first-child .q2 li:not(.q77 li) потомок это .q77 li

    Изменено пользователем aqua.77

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    radioactive
    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
    1 час назад, radioactive сказал:

    И как? работает?

    запись li:not(.q77 li) неправильная, в скобках нельзя указывать потомок
    псевдокласс :not применяется к тегу li который выделен зеленым выше, это как li.q77 только наоборот, есть у вас в коде li.q77 ?

    вот мини демо
    https://jsfiddle.net/9Ljrv9of

    Всё всё понятно.

    Изменено пользователем aqua.77

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    10 часов назад, SelenIT сказал:

    .q1 li:first-child .q2 :not(.q77) li:hover

    Ваш пример должен работать по логики вещей, этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77. Но почему то проблема осталась(нет саму проблему я решил просто интересно почему этот селектор не работает). Селектор на  строке 94 https://jsfiddle.net/cz8pz484/

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    radioactive
    34 минуты назад, aqua.77 сказал:

    этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77.

    нет, применяться не будет т.к стоит пробел между q2  и q77 -  ".q2 :not(.q77)"  - q77 всего лишь потомок q2


    и работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not

    то есть вот

    .q1 li:first-child .q2 ul:not(.q77) li:hover

     

    Изменено пользователем radioactive
    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    2 часа назад, radioactive сказал:

    то есть вот

    Вот и я думаю, у вас абсолютно правильный селектор, но не работает. Я даже так сделал .q1 li:first-child ul:not(.q77) li:hover. https://jsfiddle.net/cz8pz484/1/

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    radioactive
    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 строка, вовсе этот блок стилей удалить

     

    Изменено пользователем radioactive
    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    22 часа назад, SelenIT сказал:

    Смысл записи

    Вот селектор который гласит .q1 ul:not(.q77) li:hover: LI находящийся во всех UL кроме того что с классом .q77. Соответственно почему к LI который находится в .q77 всё ровно применяется правое выравнивание? https://jsfiddle.net/cz8pz484/3/ строка 94. (я уже сам замучился)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    aqua.77
    1 час назад, aqua.77 сказал:

     .q1 ul:not(.q77) li:hover

    Это потому что .q77 потомок ul?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • advertisement_alt
    • advertisement_alt
    • advertisement_alt