Solution 1 :

:not(:first-child) should work.

.attributeset-row .button:not(:first-child) {
  background: lightblue;
}
<div class = "attributeset-row">
  <div class="row">One</div>
  <div class="row">Two</div>
  <div class="button">Three</div>
</div>

Solution 2 :

const StyledHorizontalAttributesTable = styled(StyledHorizontalAttributes)`
  & + & {
    .remove-btn {
      background-color: lightblue;
    }
  }
`;

worked using the above thanks to this answer: Specific targeting of CSS classes with Styled Components not being rendered – React

Problem :

I’ve got a component with some pretty unique styling. The component basically renders horizontal rows (with 2 inputs, and an icon: StyledButton with a Message (remove)).

The component allows users to add/ remove as many rows as they wish, but I want to directly target any instance of the StyledButton that isn’t the first one. I’ve tried the commonly suggested answers but the issue may be the fact that the entire component is being rendered each time and the CSS can’t reach that far.

Any suggestions would be great.

const StyledButton = styled(Button)`
  margin-top: 14px;
`;

  return (
    <div className={className}>
      {objects.map((enteredObject, index) => (
        <RepeatableAttributeSetContextProvider
          form={form}
          object={enteredObject}
          key={`${enteredObject.key}-${enteredObject.repeatIndex}`}
        >
          <StyledHorizontalAttributes className="attributeset-row">
            {enteredObject.attributeCollection.questions
              .filter(filterRepeatAttributes)
              .map((attribute) => (
                <Fragment key={attribute.key}>
                  {renderAttribute(enteredObject, attribute, formLayout)}
                </Fragment>
              ))}
            <StyledButton
              type="link"
              buttonStyle="LINK"
              name="delete"
              dataId={`delete-${enteredObject.key}-${index}`}
              isOberonIcon
              isIconButton
              icon="bin"
              onClick={() => onRemove(enteredObject)}
            >
              <Message id="Form.Button.Remove" defaultMessage="Remove" />
            </StyledButton>
          </StyledHorizontalAttributes>
        </RepeatableAttributeSetContextProvider>
      ))}
    </div>
  );

Comments

Comment posted by cts

Thanks for the response, not sure if it’s down to this being StyledComponents and not vanilla CSS/HTML – but it doesn’t seem to do the trick.

Comment posted by Quasipickle

What does the rendered HTML look like?

Comment posted by cts

Lots going on, but: StyledContainer > StyledHorizontalAttributes > Row = Row = Button

Comment posted by cts

Hard to format on comments, but both Rows sit on the same level as Button. Which are children of StyledHorizontalAttributes which is a child of StyledContainer

Comment posted by Quasipickle

Sorry – are you trying to specially style the when it isn’t the first child of ?

By