CSS: updating justify-content value based on presence of child element-CodePudding

I have the following small snippet:

.container {
  display: flex;
  justify-content: space-between;
  
  .btn {
    font-size: 12px;
  }
}

<div >
  <h3>This heading wont always be here</h3>
  <button >This button always will and should be on the right</button>
</div>

Basically its a header that will always contain the button (which should always be positioned on the right) and a heading (which is optional).

At times, a heading will not exist and therefore the button will sit on the left hand side, I know that updating the justify-content property to flex-end achieves the outcome I want (in the chrome inspector) but how can I update my CSS to make this check? Ie, if no <h3>, then use justify-content: flex-end instead of space-between?

I tried using the not selector like this but to no avail:

:not(h3) {
   justify-content: flex-end;
}

CodePudding user response：

how can I update my CSS to make this check?

You can't, not really. You would need something like the :has pseudo class - but that has poor browser support yet. (See also, Is there a CSS parent selector?)

But you can add margin-left: auto to your button.

CodePudding user response：

Add margin-left: auto to .btn class, check below code
I hope it works

.container {
  display: flex;
  justify-content: space-between;
}
.btn {
    font-size: 12px;
    margin-left: auto;
  }

<div >
  <h3>This heading wont always be here</h3>
  <button >This button always will and should be on the right</button>
</div>
 <br>
 <br>

<div >
  <button >This button always will and should be on the right</button>
</div>

CodePudding user response：

You can absolutely position so that you don't need to worry about the div being present or not!

.container {
  position: relative;
  width:100%;
  
}
  .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:0px;
  }

<div >
  <h3>This heading wont always be here</h3>
  <button >This button always will and should be on the right</button>
</div>

CodePudding user response：

You could use grid rather than flex and force the button into the second column.

This snippet assumes you always want the text of the button to fit on one line but of course you could alter things using max-.... and so on depending on what you want on very narrow viewports or when you have a very long h3 text.

.container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr auto;
}

.btn {
  font-size: 12px;
  text-align: right;
  display: inline-block;
  width: fit-content;
  grid-column: 2 / span 1;
}

<div >
  <h3>This heading wont always be here</h3>
  <button >This button always will and should be on the right</button>
</div>

CodePudding user response：

You can swap the order of the elements (h3and button) in the HTML code and use flex-direction: row-reverse. That way the first element (i.e. the button) will always be on the right, regardless if there is a second element:

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.btn {
  font-size: 12px;
}

<div >
  <button >This button always will and should be on the right</button>
  <h3>This heading wont always be here</h3>
</div>
<br>
<br>
<div >
  <button >This button is on the right</button>
</div>