0

I have a compound component managing a list of items.

I want to alter the style of the parent component based on the count of child elements (in this case, we have three windows:

  • N < 11 :width 100, zoom 1
  • N between 11 and 22 : width 200, zoom 1
  • N > 22 : width 300, zoom .5

I'm open to altering the style tag (preferred) or altering the class tag, but I don't know how to do either. It should be mentioned that the style tag is also being used by another process, so whatever happens we need to not interfere with the existing value (which does not access the width or zoom descriptors)

Sean Munson
  • 343
  • 2
  • 9
  • I think you can do it with JS instead. CSS bit limiting when it comes to conditions like you gave. Do you know any javascript? – Ozan Ayten Jan 08 '20 at 18:49
  • https://stackoverflow.com/a/12198561/2864740 - "Note that, in CSS3, *styles cannot be applied to a parent node based on the number of children it has*. However, styles can be applied to the children nodes based on the number of siblings they have." – user2864740 Jan 08 '20 at 18:51
  • 1
    In the case of the *parent* ("I want to alter the style of the parent component") one might add an attribute with the count 'bucket' (ie. 'items-0to10', 'items-10to100', 'items-100plus') to be used in a selector. This can be added with JS dynamically or during HTML generation. I recommend opening a *new* question (*post additional research and trials*) to explore either of these, as this question is tied specifically to CSS. – user2864740 Jan 08 '20 at 18:52
  • Thanks for making it clear that my issue isn't the CSS. It's the react tag manipulation. – Sean Munson Jan 08 '20 at 19:09
  • 1
    @GrunionShaftoe Ah okay then, I could provide js solution if needed but it seems not. – Ozan Ayten Jan 08 '20 at 19:17

0 Answers0