How to use child selectors in JSS

Question

I'm experimenting with JSS to see if it is realistic to migrate a Sass code base. I have a very basic example of a CSS style that, when hovered, modifies the style of a child node.

span {
  color: red;
}

button:hover span {
  color: blue;
}

<button>
  <span>Click Me</span>
</button>

I am unsure how to write this in JSS. Something I have tried looks like:

const styles = {
  button: {
    '&:hover': {
      span: {
        color: 'blue',
      }
    }
  },
  span: {
    color: 'red',
  }
}

const { classes } = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class=${classes.button}>
    <span class=${classes.span}>Click Here</span>
  </button>
`

Thanks!

score 18 · Accepted Answer · answered Jun 29 '18 at 05:45

18

Have you tried doing:

const styles = {
  button: {
    '&:hover span': {
       color: 'blue',
    }
  },
  span: {
    color: 'red',
  }
}

answered Jun 29 '18 at 05:45

deowk

4,280
1
25
34

4

Thanks! How would it work if it was a class name that did not match an element selector. For instance if it was `someClass`. – Jon Sakas Jun 29 '18 at 15:44
6

@JonSakas, prefix the class with a $. For example: `"&:hover $someClass"` – cwouter Aug 28 '19 at 08:04
when hovered on the button, is this code gonna change all span element's color or the span elements which are nested in the button? – Ali Baghban Jul 07 '21 at 08:17
hi @deowk, is there any way to access the parent element using the child element in JSS – Manu Panduu Nov 08 '21 at 07:09

VnoitKumar · Answer 2 · 2020-05-28T01:59:00.940

13

As mentioned in the comment by @cwouter, if it was a class name, you can do something like this.

const styles = {
  button: {
    '&:hover $some_class_name': {
       color: 'blue',
    }
  },
  some_class_name: {
    color: 'red',
  }
}

edited May 28 '20 at 01:59

answered May 27 '20 at 13:22

VnoitKumar

1,350
15
29

How to use child selectors in JSS

2 Answers2

Linked