CSS style div3 differently if div1 and div2 don't exist - html

Question

If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}

Answer 1

Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>

Answer 2

You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}

Answer 3

You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>

Answer 4

i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}