Add CSS rule only if previous sspecific sibling is not there-CodePudding

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

    <p >
        <input type="button"  value="Extend">
        <span ></span>
    </p>
    <p >
        <input type="button"  value="Relist Manually">
        <span ></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  style="background-color: #f00;">
  <p >
    <input type="button"  value="Extend">
    <span ></span>
  </p>
  <p >
    <input type="button"  value="Relist Lottery Manually">
    <span ></span>
  </p>
</div>

<div  style="background-color: #0f0;">
  <p >
    <input type="button"  value="Relist Lottery Manually">
    <span ></span>
  </p>
</div>

CodePudding user response：

You can achieve that using adjacent sibling selector

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

<p >
  <input type="button"  value="Extend">
  <span ></span>
</p>
<p >
  <input type="button"  value="Relist Manually">
  <span ></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  style="background-color: #f00;">
  <p >
    <input type="button"  value="Extend">
    <span ></span>
  </p>
  <p >
    <input type="button"  value="Relist Lottery Manually">
    <span ></span>
  </p>
</div>

<div  style="background-color: #0f0;">
  <p >
    <input type="button"  value="Relist Lottery Manually">
    <span ></span>
  </p>
</div>

CodePudding user response：

You can to use css selector "only-child" like:

.relist-button-field:only-child

https://www.w3schools.com/cssref/sel_only-child.asp