<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
This code snippet showcases a simple HTML structure, which I have replicated on CodePen here.
The child elements "one" and "two" can be floated either to the right or left, allowing for versatile alignment options.
Here comes my query →
Is the first child determined by the order in which it is written in the HTML markup? If so, regardless of its rendering sequence in the browser when floated, it will always retain the status of being the first child. Or does the position as the first or Nth child depend on the order of rendering in the browser rather than the HTML code?
WHY AM I RAISING SUCH INQUIRIES.
There are instances, particularly in WordPress templates, where the sole disparity between two layouts is the positioning of the sidebar – one on the left and the other on the right. Sometimes, implementing a separate template seems redundant as the entire HTML structure remains unchanged; only the arrangement of the two columns differs.
I envision an approach where we leverage some CSS property targeting the first child to set a margin-right solely on the column that appears first in the browser.
If this hypothesis holds true → https://codepen.io/codeispoetry/pen/xdymZJ
then margin-right ought to be applied to .one. Conversely, if we swap the display order such that green precedes blue, margin-right should affect .two.
My aim is to achieve this without resorting to JavaScript or PHP, instead maximizing the potential of CSS, possibly by utilizing the first child pseudo-class in a creative manner.