nth-of-type example

[DjordjePetrovic]

For stuff like this in css

p:nth-of-type(1) {}
p:nth-of-type(2) {}
p:nth-of-type(3) {}

you basically need to create object with styling for every p and then attach it to that element? What's the best practice for this stuff?

[martinandert]

@DjordjePetrovic Could you please give me a specific code example (e.g. component and styles) that shows what you're trying to achieve and how you currently do that?

[DjordjePetrovic]

@martinandert

let's say in component we have something like this

<div className="example">
      <h3>{somedata.name}</h3>
      <p>-||-<br/>
      <p>-||-</p>
      <p>-||-</p>
</div>

and in css

.example p:nth-of-type(1) {
 // some custom style
}
.example p:nth-of-type(2),
.example p:nth-of-type(3) {
  // some custom style
}

so I create cssToJS style object for "example" div, and what I wanted to do is to have something like

example : {
// some styling and then
"p:nth-child(1)" : {}
}

but I get "value must be a number or a string"

So I assume I'll have to create style object for every "p" element and then attach styling on every p like

<p className={styles.firstParagraf}></p>
<p className={styles.secoundParagraf}></p>

?

[martinandert]

This looks like a reasonable use case which should be addressed.

I'm going to add support for it but this may take a few days since my spare time is somewhat limited currently. But I am always open for pull requests if you'd like to speed up the process.

[DjordjePetrovic]

@martinandert great tnx!

[martinandert]

Hey @DjordjePetrovic, with version 1.2.0 you are now able to do

var styles = cssInJS({
  example: {
    // some styling
  },
  'example p': {
    ':nth-child(2)': {
      // styles for p:nth-child(2) children
    }
  }
});

Please let me know whether that works for you.