question: Selecting sibling element

[bytasv]

Hello,

I can't find (neither figure out) a way if it's possible to select sibling element. Suppose I have this:

{
  Label: {
    root: {}
  },
  Input: {
    root: {},
    styled: {}
  }
}

and html:

<div>
  <div class="label"></div>
  <div class="input styled"></div>
</div>

I want to replicate this css selector:

.label + .input.styled {}

Do I have a way to do that in cssinjs?

[kof]

yes, using nesting syntax https://cssinjs.org/jss-plugin-nested

[StudioSpindle]

Don't think .label + .input.styled is the same as explained in the link jss-plugin-nested. A sibling is different from a nested element.

The example in the link named 'Pseudo and Nested Selectors' shows how you could do:

<div class="label">
  <div class="input styled">
  </div>
</div>

with

.label: {
  '& .input.styled': {
    // do your stuff to the child
  }
}

But in the OP's example, he is targeting an element next to the label. I.e.:

<div class="label"></div>
<div class="input styled"></div>

would be either:

.label {
  '+ .input.styled': {
    // do stuff to the input field directly after the label
  }
}

or

.label {
  '~ .input.styled': {
    // do stuff to the input field directly after the label
  }
}