Add CSS rule only if previous sspecific sibling is not there

Question

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>

dippas · Accepted Answer · 2022-06-20T00:19:52.197

2

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>

edited Jun 20 '22 at 00:19

answered Jun 19 '22 at 16:19

dippas

58,591
15
114
126

I over-simplified my example, to a point where your answer doesn't resolve my problem exactly. In practice the CSS rule for which I want to add the previous sibling condition is like this: `#lottery_tab .lty-lottery-relist-button-field { padding-left: 0 !important; }` so it references the parent container div. So I tried your proposed solution like this: `#parent .first-p + #parent .second-p { padding-left: 0 !important }` but it didn't do the trick for some reason... But thanks for your attempt anyway! – Faye D. Jun 19 '22 at 16:41
Then give a working snippet to see the real issue – dippas Jun 19 '22 at 16:44
1

@FayeD. sorry your comment got lost in the middle of my inbox, I've updated my answer to match your snippet but same solution and it works. – dippas Jun 20 '22 at 00:20
Yeah, it does. The part in my previous comment _So I tried your proposed solution like this: #parent .first-p + #parent .second-p { padding-left: 0 !important } but it didn't do the trick for some reason..._ was not actually correct. I tried it later and it worked great! Maybe I mistyped something in the first attempt. But the whole question was voted for getting closed, so I couldn't update you on the matter. So thank you so much for your help. I'm marking your answer as the correct one, as you posted it first than the other one, plus it's more direct than using pseudo-classes, etc. – Faye D. Jun 20 '22 at 00:51

score 1 · Answer 2 · answered Jun 19 '22 at 16:19

1

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

.relist-button-field:only-child

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

answered Jun 19 '22 at 16:19

ankurjhawar

315
1
4
14

1

Your answer was actually exactly the opposite of what I was trying to achieve. I changed it to `:not(:only-child)` and it worked great. And in fact I had to change the `:only-child` pseudo class to `:only-of-type`, because the parent div has other elements in the full UI (not the over-simplified I used for this example), but only these two p elements. But indeed your answer was a great inspiration to solve my problem! So thanks! – Faye D. Jun 19 '22 at 16:45

Add CSS rule only if previous sspecific sibling is not there

2 Answers2