HTML Button tag css-CodePudding

I am trying to change the background colour and position of the first button from left to right so that the second button displays first. But the :first-child selector doesn't work.

I am using sass.

HTML structure-

<div class="buttonWrapper">
   <button class="reject" id="rcc-decline-button" aria-label="Decline cookies">Reject</button>
   <button class="accept" id="rcc-confirm-button" aria-label="Accept cookies">Accept Cookies</button>
</div>

My code:

.buttonWrapper button{
  border: none;
  border-radius: 4px;
  background-color:#000;
  button:first-child{
    background-color:#fff;
    float: right;
    margin-left: 2rem;
  }
}

Any help is highly appreciated.

CodePudding user response：

If you're using a preprocessor (SASS, LESS, et al) which supports nesting, you should use the & selector inside the nesting:

.buttonWrapper button {
  border: none;
  border-radius: 4px;
  background-color: #000;

  &:first-child{
    background-color: #fff;
    float: right;
    margin-left: 2rem;
  }
}

CSS by itself doesn't support nesting the way that preprocessors do. Regular CSS requires a more verbose syntax (Note: the above nested syntax will compile to this plain CSS):

.buttonWrapper button {
  border: none;
  border-radius: 4px;
  background-color: #000;
}

.buttonWrapper button:first-child{
  background-color: #fff;
  float: right;
  margin-left: 2rem;
}