Access child element from parent using JSS

Question

I am trying to achieve this behavior using JSS.

.thumbnail:hover+.title {
  display: block;
}

Here's an example using IDs instead of classes: https://codepen.io/Pixelizm/pen/ICpKv/

Edit: I think I was unclear. I want to recreate the above code snippet and codepen using CSS-in-JS. ( https://material-ui.com/customization/css-in-js/# )

Edit 2: I appreciate all the feedback. The question was not about IDs vs classes but about JSS. I found the answer and it is in the comments. Thank you all.

Answer 1

This should work.

'& + .title': {
  display: 'block'
}

Hope it helps!

Answer 2

In the CSS, a class selector is a name preceded by a full stop ( . ) and an ID selector is a name preceded by a hash character ( # ). The below change will work.

<a class="thumbnail" href="#">
  <img src="http://dummyimage.com/150x150/0066ff/fff">
</a>
<div id="title">filename.jpg</div>

.thumbnail {
  display: block;
  width: 150px;
  height: 150px;
}

.thumbnail:hover+#title {
  display: block;
}

#title {
  display: none;
  color: #ffffff;
  background-color: #000000;
  text-align: center;
  width: 130px;
  padding: 10px;
}

Answer 3

This is it working with classes

https://codepen.io/anon/pen/oyJQoM

<a class="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div class="title">filename.jpg</div>

CSS:

.thumbnail {
    display: block;

    width: 150px;
    height: 150px;
}

.thumbnail:hover + .title {
    display: block;
}

.title {
    display: none;

    color: #ffffff;
    background-color: #000000;
  text-align: center;

  width: 130px;
  padding: 10px;
}