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

[aqua.77]

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

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

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

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

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

[SelenIT]

  On 11/24/2016 at 6:54 PM, radioactive said:

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

Expand  

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

  On 11/25/2016 at 6:23 AM, aqua.77 said:

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

Expand  

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

 

[radioactive]

Эм

.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

[aqua.77]

  On 11/23/2016 at 6:29 PM, radioactive said:

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

Expand  

Нет

[radioactive]

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

[spartak9871]

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

[aqua.77]

  On 11/23/2016 at 7:34 PM, radioactive said:

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

Expand  

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

  On 11/23/2016 at 10:01 PM, spartak9871 said:

 

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

 

Expand  

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

[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 */
}

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

[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>

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

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

Edited November 24, 2016 by radioactive

[aqua.77]

  On 11/24/2016 at 8:21 AM, radioactive said:

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

Expand  

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

  On 11/24/2016 at 8:19 AM, SelenIT said:

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

Expand  

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

[spartak9871]

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

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

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

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

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

https://webref.ru/css

Edited November 24, 2016 by spartak9871

[SelenIT]

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

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

[aqua.77]

  On 11/24/2016 at 8:21 AM, radioactive said:

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

Expand  

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

[aqua.77]

  On 11/24/2016 at 8:21 AM, radioactive said:

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

Expand  

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

Edited November 24, 2016 by aqua.77

[radioactive]

  On 11/24/2016 at 4:02 PM, aqua.77 said:

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

Expand  

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

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

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

[aqua.77]

  On 11/24/2016 at 4:28 PM, radioactive said:

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

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

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

Expand  

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

Edited November 24, 2016 by aqua.77

[aqua.77]

  On 11/24/2016 at 8:19 AM, SelenIT said:

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

Expand  

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

[radioactive]

  On 11/24/2016 at 6:20 PM, aqua.77 said:

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

Expand  

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

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

то есть вот

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

 

Edited November 24, 2016 by radioactive

[aqua.77]

  On 11/24/2016 at 6:54 PM, radioactive said:

то есть вот

Expand  

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

[radioactive]

  On 11/24/2016 at 8:05 PM, aqua.77 said:

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

Expand  

не работает потому что 

.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

[aqua.77]

  On 11/24/2016 at 8:19 AM, SelenIT said:

Смысл записи

Expand  

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

[aqua.77]

  On 11/25/2016 at 5:54 AM, aqua.77 said:

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

Expand  

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