Use CSS to hide adjacent DIV based on content - html

Question

Here are two potential situations in my HTML:
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
My goal is to hide "ptb_link_button" in the first one, but allow the "ptb_link_button" div to display in the second example. Basically, if the item is sold, I do not want to display the "Register" button.
I initially thought this would work:
div.ptb_sold:empty+.ptb_link_button {
display: none;
}
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link one</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link two</a>
</div>
But unfortunately it does not. Any other suggestions?

Answer 1

If I understood you correctly, then I think this would be the approach:
// Hides the button if sold
div.ptb_sold + .ptb_link_button a.ptb_link_button {
display: none;
}
// Show the button if not sold
div.ptb_sold:empty + .ptb_link_button a.ptb_link_button {
display: block;
}
Example - https://jsfiddle.net/4o1gvnjx/
Also, I would consider changing the class name of the container for the button to be something like 'ptb_link_button-container' to avoid confusion. That way, the CSS selector would be more streamlined.