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

Question

I have the following small snippet:

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

<div class="container">
  <h3>This heading wont always be here</h3>
  <button class="btn">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;
}

_"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. But you can add `margin-left: auto` to your button. — CBroe, Sep 02 '22 at 12:01
This seems to be the cleanest solution, thank you! If you'd like to add this as an answer I'd be happy to assign it as the answer :) — cts, Sep 02 '22 at 12:23

score 3 · Accepted Answer · answered Sep 02 '22 at 12:45

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.

score 1 · Answer 2 · answered Sep 02 '22 at 12:21

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 class="container">
  <h3>This heading wont always be here</h3>
  <button class="btn">This button always will and should be on the right</button>
</div>
 <br>
 <br>

<div class="container">
  <button class="btn">This button always will and should be on the right</button>
</div>

score 0 · Answer 3 · answered Sep 02 '22 at 11:54

0

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 class="container">
  <h3>This heading wont always be here</h3>
  <button class="btn">This button always will and should be on the right</button>
</div>

answered Sep 02 '22 at 11:54

Naren Murali

19,250
3
27
54

How does this cope with narrow viewports or longer heading? – A Haworth Sep 02 '22 at 12:12
@AHaworth I am trying to fulfill user requirements, not a complete solution! – Naren Murali Sep 02 '22 at 12:13

score 0 · Answer 4 · answered Sep 02 '22 at 12:18

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 class="container">
  <h3>This heading wont always be here</h3>
  <button class="btn">This button always will and should be on the right</button>
</div>

score 0 · Answer 5 · answered Sep 02 '22 at 12:22

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 class="container">
  <button class="btn">This button always will and should be on the right</button>
  <h3>This heading wont always be here</h3>
</div>
<br>
<br>
<div class="container">
  <button class="btn">This button is on the right</button>
</div>

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

5 Answers5