No support for siblings

[iamrane]

Sometimes siblings are really important to looking at when styling custom checkboxes. For example this piece of code is quite common

[type=checkbox]:checked + .custom {
    ...
}

I find no way of replicating this in aphrodite. And I can't really come up with a work around without involving javascript.

[xymostech]

Oops, I thought I had responded to this! We don't currently support this, but it should be sorta solved by a similar solution as #10. We likely won't support the [type=checkbox] style of queries, because Aphrodite is meant more for component-level styling, so you would have to add a class name to each of your <button type="checkbox">s.

For now, you can use a JavaScript solution.

[ndugger]

I almost don't want to reply with this, because it's exploitative and should be patched out, but I'm finding it useful (so please don't patch it out!)...

You can use :nth-child(1n) + whatever to achieve most of what you're trying to get at... An example is my usage here:

export default Aphrodite.StyleSheet.create( {

    buttonGroup: {

        ':nth-child(1n) > *': {
            borderRadius: 0
        },

        ':nth-child(1n) > :first-child': {
            borderRadius: '8px 0 0 8px'
        },

        ':nth-child(1n) > :last-child': {
            borderRadius: '0 8px 8px 0'
        }
    }
} )

My suggestion to fix this in the library would be to allow child property names to start with a combinator, like >, +, ~, etc, though that might stray slightly from the main goal of Aphrodite.

[xymostech]

@ndugger Yeah, that's definitely a way to use + combinators currently, but it is a hack. KA uses the hack too, though, so we'll almost certainly provide a migration plan if/when we break it. :)

[sontek]

Yeah, the major thing we need is similar to the opening example... We want to style checkbox labels differently depending on if the checkbox is checked or not:

  input[type=checkbox]:checked + label {
        background-color #FF0000;
  }

[ndugger]

@sontek you could accomplish this with the method I posted above:

Aphrodite.StyleSheet.create({

    checkbox: {
        ...

        ':checked + label': {
            ...
        }
    }
});

From what I can tell, Aphrodite isn't super smart when parsing; it just looks for a colon, and then accepts the full string.

[sdras]

Any updates on supporting adjacent sibling selectors? It would be much appreciated.

[axpence]

Any update on supporting child combinator as well? would be great!