When the screen becomes responsive and small, I want to turn off the sidebar, but I want to display only the logo, so I don't want to apply CSS only to the img image, but: not is not applied. How can: not be applied to show only the logo?

Corresponding source code


  • TOP






.sidebar img: not (.sidelogo) {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;

What I tried

Make space, etc.

  • Answer # 1

    .sidebar img: not (.sidelogo)
    Then.sidebarIn the img element of the offspring element of.sidelogoIt means other than.
    Since it has been applied, it is displayed.

    .sidelogoIf you want to display elements other than, it will be as follows.
    .sidebar *: not (.sidelogo)

    However, with this,.sidelogoOf the parent element of.side-containerIs also hidden, after all.sidelogoWill also disappear.

    .side-container *: not (.sidelogo)given that,.sidelogoIs displayed and the other elements (ul, li) are hidden.

    If it is the HTML structure, the following may be acceptable.

    .side-container ul {
        height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;

  • Answer # 2

    : not does not apply.

    House,Has been appliedIsn't the image displayed as it is?