Clever CSS for adjusting style based on preceding or lower elements

Question

I am trying to write some CSS for border styles, where I cannot predict what element will come next in the page. For example:

#myDiv {
  border-top: 1px solid black;
}

button {
  border-width: 4px 0 3px 0;
  border-color: black;
  width: 100%;
  padding: 6px;
}

<section>
  <button>BUTTON</button>
</section>
<div id="myDiv">^ 4px divider comprising of 3px on the button and 1px on the div</div>

However, there is a possibility of the button being followed not by #myDiv but instead by another section that has no border.

section>button {
  border-width: 4px 0 3px 0;
  border-color: black;
  width: 100%;
  padding: 6px;
}

.otherButton {
  border: none;
  padding: 6px;
  width: 100%;
  background-color: white;
}

<section>
  <button>BUTTON</button>
</section>
<button class="otherButton">SECONDARY BUTTON NO BORDER</button>

In the above instance, you can see that my use of 3px doesn't give me the required border thickness.

Is there a way to set a style for alternating between border-bottom: 3px or border-bottom: 4px depending on whether the parent section is followed by a button or a div#myDiv? I know that there are several methods for elements + other elements but cannot figure out how to utilise them in this instance.

Rather than combining adjacent borders, why not assign a `4px` border on all buttons, avoiding the problem? "*Is there a way to set a style for alternating between `border-bottom: 3px` or...`4px` depending on whether the parent section is followed by a button or a div#myDiv?*" - unfortunately not, since the previous sibling knows nothing about its next sibling, and so is unable to affect the border of the descendant ` — David Thomas, Apr 20 '22 at 12:16
@DavidThomas in that instance, two buttons next to each other would show 8px borders in between each button. — user1486133, Apr 20 '22 at 12:19
Then you need to show enough of your code so that we can see the scenarios you expect to deal with, in the situation you mention then `button:not(:last-child) {border-bottom: 1px}` and `button:last-child {border-bottom: 4px}` seems potentially workable. Please note that I'm trying to get enough information so that your question isn't closed as a dupe of https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector. — David Thomas, Apr 20 '22 at 12:21
@DavidThomas not sure if you understand the question properly - OP is trying to get a 4px line under the button no matter if the element following the section has a 1px border top or not. Not sure how changing the bottom border of the button helps this — Pete, Apr 20 '22 at 12:34
Yes, @Pete. as I understand the OP wishes to have a 4px line between two elements that appear adjacent, despite one (the `
@David Probably me misunderstanding your previous comment then - not sure how changing the bottom border of the button dependant on whether it was a last child or not helped. I think the problem comes when the next element may or may not have a border - so assigning the button 4px regardless wouldn't work - unless you did the negative margin for the following element with a border as temani has suggested — Pete, Apr 20 '22 at 12:55

score 1 · Answer 1 · answered Apr 20 '22 at 12:25

I would consider a negative margin-top for mydiv

#myDiv {
  border-top: 1px solid black;
  margin-top:-1px;
}

button {
  border-width: 4px 0 4px 0;
  border-color: black;
  width: 100%;
  padding: 6px;
}

.otherButton {
  border: none;
  padding: 6px;
  width: 100%;
  background-color: white;
}

<section>
  <button>BUTTON</button>
</section>
<div id="myDiv">^ 4px divider comprising of 3px on the button and 1px on the div</div>

<section>
  <button>BUTTON</button>
</section>
<button class="otherButton">SECONDARY BUTTON NO BORDER</button>

Clever CSS for adjusting style based on preceding or lower elements

1 Answers1