The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Limits of :not() selector?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #45305

    Hello, I’m writing a stupid CSS menu without Javascript.

    I’m making it just for see if is possible to remove js completly and have a nice menu.

    I’ve almost did it, it opens submenus, have an hoverintent for delay the close of submenus etc.
    The only problem I have is to make a submenu close if I open another submenu.

    For do it I’ve thinked about this CSS:

    nav > ul > li > ul:not(li:hover > ul) {
    max-height: 0px;

    It means:
    hide every submenu except the one with the parent hovered.

    But… it doesn’t work neither in Chrome or Firefox.

    This is the menu:

    My doubt is that the :not() selector has some limit and doesn’t allow nested selectors in it. On web I can’t find examples with the allowed selectors.
    May someone help me get the problem?



    Sorry guys I’ve solved the problem, but I’m still curious about the limits of the :not() selector.
    If someone can explain me how it works please…

    For fix it I’ve used this CSS:

    nav > ul:hover > li:not(:hover) > ul {
    display: none;

    I’ve just moved the not selector on the parent, so I don’t need to specify the “li > hover” into the :not() selector.



    You can only have simple selectors as argument:

    Combinations are not allowed. Have you tried:?

    nav li:not(:hover) > ul {
    max-height: 0;


    Thank you for the useful links.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.