Thatās just standard CSS selectors - if you frequently style your cards it would definitely make sense to read up on this - w3 schools, mozilla, and css-tricks have some great resources on this (css tricks is a godsend if you want to style flexbox or grid).
letās start with why itās even the root element that I mentioned
You were on the right track with your dev tools - if you had highlighted the #root element, this will be highlighted on your webpage as well and you can see that this is what creates the flex elements - this is also indicated by the flex chip in the dev tools. And then basically the direct children of this element are the ones that get their sizing from the flexbox based on different criteria (again, see css-tricks on flexbox regarding how you can style these - other approaches would have worked as well, you could also define the sizes dynamically which might even make more sense in your appplication ā then the browser defines the best sizes which makes it much more responsive).
How to select the correct element
In this case, for some reason, it skips a hierarchy (donāt ask me why, I donāt understand that, it seems hui-card isnāt a real element) - you can see that be hovering over the children elements in the dev tools and see whatās being selected. If you select the <mushroom-template-card> in your dev-tools youāll see that indicated on your webpage. Thatās also where I found the flex: ruleset and realized that this was the item being styled. There you can also see the selector that using the asterisk because it skips a level.
Basically what that selector is doing is: find a div with id=root, of its immediate children (indicated by >) take the first child and of its immediate children take all (which is just the one element). So youāre doing root>hui-card>mushroom-template-card, which is the element you want to style.
itās really just finding the element to target and then find the path to it from the element that youāve started from (which is the hui-horizontal-stack-card).
Usually you wouldnāt need every single step, this is just because of your setup wanting to target very specific elements. If you wanted to target all four elements at once you could have done #root mushroom-template-card for example - this would have targeted all 4 of your items and you could e.g. change all of their font sizes.
regarding your mushroom-card element
You had <mushroom-card> selected, which is also a flex-box. There is certainly a way how you could have used that to change the size, but it would have been much more complicated to get the other element to react accordingly. Whenever you have a flexbox or a grid itās easiest to work from the top down.
They are made to be responsive and change sizes dynamically, so itās best not to target element too deep down in the hierarchy. As mentioned: even better than your fixed percentages would be to work with flex-grow and flex-shrink for example (not tested, but should be possible), as this helps the content to react to larger and smaller screen sizes. On a ultrawide monitor a width of 43% is way too much - scaling all elements accordingly would probably be the way to go. Flexbox and Grid take a lot of the manual rules out of the game and let the browser decide whatās best - you just have to define some guidelines (such as min-width/max-width, flex-grow, flex-shrink, etc.)
