Parent Selector Nested Inside &:Hover

Parent Selector nested inside &:hover

The parent selector (&) will always refer to the full parent based on the level at which you are. For example at the first level of nesting, & refers to .module-name. In the second level, it refers to .module-name__sub-module1 and in the third level, it refers to .module-name__sub-module1:hover.

Extract from Less Website: Note that & represents all parent selectors (not just the nearest ancestor or the overall root ancestor)

The emphasised part in the above statement is my inclusion based on the context

For this particular case, you could assign the module-name to a variable and use selector interpolation like below to form the selectors.

The variable value would never change unlike the parent selector (&) irrespective of how many levels of nesting you have and at which level of nesting you are using it.

@module-name: mod-name;
.@{module-name} {
    &__sub-module1 {
        &:hover {
            & .@{module-name}__sub-module2 {
                // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
                color: blue;
            }
        }
    }
}

SCSS: parent hover selector

If I understand your question correctly: https://jsfiddle.net/wx9L9jzj/3/

SCSS:

.parent {
  width: 200px;
  height: 200px;
}

.children {
  height: 100px;
  width: 100px;
  
  .is-active & {
    background: red;
  }
  
  :hover > & {
    background: blue;
  }
}

Note the :hover > & SCSS selector that essentially looks at the parent node to determine if the child was within a :hover pseudo-class. This is not standard CSS and requires the SASS syntax to be compiled to standard CSS, which SASS does by rewriting the selector.

Per SASS documentation on the parent (&) selector:

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.

SASS / SCSS hover when using &__* syntax to reach parent selector

.button {
   $root: &;

   &__icon {
       color: green;
   }

   &:hover #{$root}__icon {
       color: red;
   }
}

.button {
   $root: &;

   &__icon {
       color: green;

       #{$root}:hover & {
           color: red;
       }
   }
}

Style child element when hover on parent

Yes, you can definitely do this. Just use something like

.parent:hover .child {
   /* ... */
}

According to this page it's supported by all major browsers.

Nested parent-child hover issue

You cannot do this with your current code in CSS, as this:

div.parent:hover > .child:first-of-type {
    background: red;
}

Is selecting all of this:

<div  class="child">This is Child Para
    <div class="parent">The Parent paragraph.
        <div  class="child">This is Child Para
            <div class="parent">The parent paragraph.
                <div  class="child">This is Child Para
                </div>
            </div>
        </div>
    </div>
</div>

Because all of it is inside the .child div. On the other hand, you can wrap the text you want to be red in a <p> or <span> and select that with the css instead, like this.

p:hover + div > p {

    background: red;

}

<div class="parent">

  <p>The Parent paragraph.</p>

  <div  class="child">

    <p>This is Child Para</p>

    <div class="parent">

      <p>The Parent paragraph.</p>

      <div  class="child">

        <p>This is Child Para</p>

        <div class="parent">

          <p>The Parent paragraph.</p>

          <div  class="child">

            <p>This is Child Para</p>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div>This is second Para</div>

</div>

Sass Nesting for :hover does not work

For concatenating selectors together when nesting, you need to use the parent selector (&):

.class {
    margin:20px;
    &:hover {
        color:yellow;
    }
}

css hover nested classes propagates

.myLinks{
  display:none;
}

.comment:hover > .myLinks {
  display: block;
}

Scss parent selector, hover and active

Your :hover and :active selectors are related to li element. You should put these rules to a section.

nav {
  max-width:100%;
  background: lightblue;

  ul{
    background: yellow;

    li {
      background: yellow;
      text-align: center;

      a { // <a> starts here
        color: red;
        display: inline-block;

        &:hover { 
          background: linear-gradient(to top, green 4px, transparent 0); 
        }

        &:active { 
          background: linear-gradient(to top, green 4px, transparent 0); 
        }
      } // and ends here
    }
  }
}

how to use css in JS for nested hover styles, Material UI

The correct syntax is "&:hover > div:hover": { ... }.

Here is a working example demonstrating the syntax:

import React from "react";
import ReactDOM from "react-dom";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  navlink: {
    border: "1px solid green",
    fontSize: "16pt",
    "&:hover": {
      backgroundColor: "lightgreen"
    },
    "&:hover > div:hover": {
      backgroundColor: "lightblue"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <div className={classes.navlink}>
        Hello <div>CodeSandbox</div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit nested div hover

It also works to deeply nest with this syntax:

const useStyles = makeStyles({
  navlink: {
    border: "1px solid green",
    fontSize: "16pt",
    "&:hover": {
      backgroundColor: "lightgreen",
      "& > div:hover": {
        backgroundColor: "lightblue"
      }
    }
  }
});

Edit nested div hover

Here is the relevant JSS documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.0-alpha.24

Parent Selector Nested Inside &:Hover