Add CSS rule only if previous sspecific sibling is not there

Issue

I have a UI where there may exist two buttons, each in its own <p> container.

    <p class="form-field extend-button-field">
        <input type="button" class="extend button" value="Extend">
        <span class="extend-msg"></span>
    </p>
    <p class="form-field relist-button-field">
        <input type="button" class="manual-relist button" value="Relist Manually">
        <span class="manual-relist-msg"></span>
    </p>

In some cases though only the second (the Relist) button may exist.

Also, there is a CSS rule in effect:

.relist-button-field {
  padding-left: 0 !important;
}

What I want is to edit this rule a little so that it's in effect only when p.extend-button-field is there (as I said, there may be some cases where only the second button appears). Any help please?

.parent p {
  padding: 5px 20px 5px 162px !important;
}

.parent .extend-button-field,
.parent .relist-button-field {
  display: inline-block;
}

.parent .relist-button-field {
  padding-left: 0 !important;
}

<div class="parent" style="background-color: #f00;">
  <p class="form-field extend-button-field">
    <input type="button" class="extend button" value="Extend">
    <span class="extend-msg"></span>
  </p>
  <p class="form-field relist-button-field">
    <input type="button" class="manual-relist button" value="Relist Lottery Manually">
    <span class="manual-relist-msg"></span>
  </p>
</div>

<div class="parent" style="background-color: #0f0;">
  <p class="form-field relist-button-field">
    <input type="button" class="manual-relist button" value="Relist Lottery Manually">
    <span class="manual-relist-msg"></span>
  </p>
</div>

Solution

You can achieve that using + adjacent sibling selector

.extend-button-field + .relist-button-field {
  background: red;
  padding: 10px;
}

<p class="form-field extend-button-field">
  <input type="button" class="extend button" value="Extend">
  <span class="extend-msg"></span>
</p>
<p class="form-field relist-button-field">
  <input type="button" class="manual-relist button" value="Relist Manually">
  <span class="manual-relist-msg"></span>
</p>

Edit:

As far as I understood, from your updated snippet and your comment to another answer my solution still works, see snippet below below

.parent p {
  padding: 5px 20px 5px 162px;
}

.parent .extend-button-field,
.parent .relist-button-field {
  display: inline-block;
}

.parent .extend-button-field + .relist-button-field {
  padding-left: 0;
}

<div class="parent" style="background-color: #f00;">
  <p class="form-field extend-button-field">
    <input type="button" class="extend button" value="Extend">
    <span class="extend-msg"></span>
  </p>
  <p class="form-field relist-button-field">
    <input type="button" class="manual-relist button" value="Relist Lottery Manually">
    <span class="manual-relist-msg"></span>
  </p>
</div>

<div class="parent" style="background-color: #0f0;">
  <p class="form-field relist-button-field">
    <input type="button" class="manual-relist button" value="Relist Lottery Manually">
    <span class="manual-relist-msg"></span>
  </p>
</div>

Answered By - dippas