• 0
aqua.77

Продолжая тему псевдокласса not()

    Вопрос

    aqua.77

    Например я хочу закрасить DIV но не трогая P 

    div{
            width:400px;
            height:400px;
            border:1px black solid;
    }
    p{
            width:200px;
            height:200px;
            border:1px black solid;
    }
    div:hover:not(p){
            background:black;
    }
    <div>
    <p></p>
    </div>

    div:hover:not(p) это применение потомка к not так нельзя https://jsfiddle.net/sm5jr7vd/

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


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

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

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

    • 0

    Разве тут проблема не в том, что р без фона и потому прозрачен? само собой, через него будет виден фон дива. 

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


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

    вы так и не поняли принцип этого псевдокласса

    данное условие div:hover:not(p) говорит как
    все div которые не p

    но селектор p само по себе не селектор div, противоречие - отсюда игнорирование :not

    в данной ситуации решение вот 

    https://jsfiddle.net/7dnrjz4e/

    только я сделал наоборот закрашивание внутренного блока чтобы вы увидели работу css, иначе - как вам сказали выше, наличие прозрачности внутреннего блока не даст вам увидеть работу псевдокласса :not

    на пустой странице решение только такое, а так все делается через родителей

     

    p.s 
    знак * применяется ко всем элементам
    например ul *
    все элемента внутри ul

    тоесть по ссылке код css говорит 
    все элементы кроме p

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

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


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

    селектор p само по себе не селектор div, противоречие - отсюда игнорирование :not

    Точнее, :not как раз не игнорируется, просто селектор становится бессмысленным и ничего не выбирает (хотя формально валиден). Такие заведомо ничего не затрагивающие, но формально валидные фиктивные селекторы могут быть полезны в хаках для конкретных браузеров, типа

    #hack:not(#hack):-moz-any-link, .my-selector { /* стили применятся только в браузерах, понимающих :-moz-any-link, т.е. в Мозилле */ }

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


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

    В подобных ситуациях обычно задают стиль вначале для div, а потом нужные правила переопределяют для вложенного p.

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


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

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

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

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

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

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

    Войти

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

    Войти сейчас

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

    Карта разработчиков

    Карта участников

    Отметь себя на карте для поиска или предложения работы