Pull the previous sibling element - html

Question

You can use margin-right, for example, to push a next sibling as seen below:
#parent {
background: tan;
font-size: 0;
}
#parent * {
display: inline-block;
width: 50px;
height: 50px;
}
#child1 {
background: teal;
margin-right: 100px;
}
#child2 {
background: olive;
}
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>
I know there is no previous sibling selector in CSS. However, I wonder if there's a workaround so #child2 can pull #child1 to a distance of say, 20px. Here's a before-after screenshot:
Note: I don't want to give a margin value to #child1 or alter the HTML. The effect should be achieved using #child2 only.

Answer 1

This code works for me, it doesn't touch #child1 but #parent. Changed to classes instead of ids just to show the same code works for all.
.parent {
background: tan;
font-size: 0;
display: flex;
}
.parent * {
display: inline-block;
width: 50px;
height: 50px;
}
.child1 {
background: teal;
margin-right: 100px;
}
.child2 {
background: olive;
}
.child3 {
background: red;
}
.parent > div:only-child {
margin-right:100px;
margin-left:0px;
}
.parent > div {
margin-right:20px;
}
.parent > div:first-child:not(:last-child) {
margin-left:60px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
<br>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<br>
<div class="parent">
<div class="child1"></div>
</div>

Answer 2

There is no previous sibling selector using pure CSS.
The possible workaround is using CSS flexbox.
First, set display property as flex to the #parent element. reverse the order of displaying child elements
<div id="child2"></div>
<div id="child1"></div>
We can correct this visually by setting
order:-1 to #child1.
Then we will address the #child1 by using
#parent>div:first-child+div
This means the next div after the first div, ie, #child1. Then set the styles.
#parent>div:first-child+div {
margin-right: 20px;
margin-left: 80px;
}
#parent {
background: tan;
display: flex;
}
#parent * {
width: 50px;
height: 50px;
}
#child1 {
background: teal;
order: -1;
}
#child2 {
background: olive;
}
#parent>div:first-child+div {
margin-right: 20px;
margin-left: 80px;
}
<div id="parent">
<div id="child2"></div>
<div id="child1"></div>
</div>
For better understandability, hover the #child2 then you can see the color change of its previous sibling.
#child2:hover+div {
background: brown;
}
#parent {
background: tan;
display: flex;
}
#parent * {
width: 50px;
height: 50px;
}
#child1 {
background: teal;
order: -1;
}
#child2 {
background: olive;
}
#parent>div:first-child+div {
margin-right: 20px;
margin-left: 80px;
}
#child2:hover+div {
background: brown;
}
<div id="parent">
<div id="child2"></div>
<div id="child1"></div>
</div>

Answer 3

According to your replies on the given answers your question should have been:
Can you 'pull the previous sibling element' by using CSS (only), and without changing the HTML?
The answer to that question is as simple as unsatisfying:
No, there is not.
Not even when you change the reading direction. I am sorry.

Answer 4

I am not sure whether this is what the OP is asking, but the following code, pulls the first child only when the second child exists, so in a sense, the second child pulls the first one :)
#parent > div:first-child:nth-last-child(2) {
margin-left:60px;
margin-right:20px;
}
Here is a working fiddle:
https://jsfiddle.net/06urn796/
Removing the second child, leaves the first one intact:
https://jsfiddle.net/06urn796/1/

Answer 5

#parent {
background: tan;
font-size: 0;
}
#parent * {
display: inline-block;
width: 50px;
height: 50px;
}
#parent div{
margin: 0px 20px;
}
#child1 {
background: teal;
}
#child2 {
background: olive;
}
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>