Jump to content
  • 0

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


aqua.77
 Share

Question

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

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

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

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

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

Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0
10 часов назад, radioactive сказал:

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

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

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

 

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

 

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

Link to comment
Share on other sites

  • 0

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

Во-вторых, :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
Link to comment
Share on other sites

  • 0

во первых вы применяете превдокласс :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 by radioactive
  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

https://webref.ru/css

Edited by spartak9871
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0
8 часов назад, radioactive сказал:

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

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

Link to comment
Share on other sites

  • 0
8 часов назад, radioactive сказал:

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

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

Edited by aqua.77
Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

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

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

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

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

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

Edited by aqua.77
Link to comment
Share on other sites

  • 0
10 часов назад, SelenIT сказал:

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

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

Link to comment
Share on other sites

  • 0
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 by radioactive
  • Like 1
Link to comment
Share on other sites

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

то есть вот

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

Link to comment
Share on other sites

  • 0
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 by radioactive
  • Like 1
Link to comment
Share on other sites

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

Смысл записи

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

Link to comment
Share on other sites

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

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

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

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

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

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

 

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy