How to invert my <p> order in a div in CSS2? - css

Question

I need your help: I want to reverse the order of <p> elements that are inside a <div>.
The difficulty is that I can't change the HTML, I can't give a class at each p, I can't use CSS3, and I can't add any JavaScript.
I can only make changes to the CSS.
<div id="divID">
<p>1</p>
<p>2</p>
</div>

Answer 1

CSS is for styling, not ordering your markup... but that being said, with CSS3 you can rotate the DIV and then individually rotate the P elements which will make them appear "in reverse order".
This is not very accessible, something like a screen reader WILL read your page differently.
http://jsfiddle.net/kzWr8/
div#divID {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}
#divID p {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}
Update: CSS2 Absolute positioning with sibling selectors: http://jsfiddle.net/kzWr8/1/
This assumes you know the height and number of a fixed number of elements so that you can position them absolutely.
div#divID {
position:relative;
}
#divID p {
border-top: 1px dotted #CCCCCC;
padding-top: 20px;
height:40px;
text-transform: uppercase;
}
#divID > p {
position:absolute;
top:60px;
}
#divID > p + p {
position:absolute;
top:0;
}

Answer 2

Short, technical answer: it's not possible. However, what is possible is changing how the order is displayed.
CSS is exclusively to style the webpage and nothing else. Changing the HTML directly will change the order. You could also accomplish such a thing with Javascript. However, CSS will only make it appear that the paragraphs have changed positions. This comes with consequences. For one, crawlers like search engines won't notice the change in positioning. Additionally, screen readers will most likely read it how it is in the HTML making the page very confusing for someone trying to access your page.
If you're okay with not actually rearranging the paragraphs, but instead making it appear like you did, you should probably check out how floating elements will make them appear in different positions. To my knowledge, this will only work in certain situations unless you want to reposition elements using relative and absolute positioning.
For example, if you've got two of the elements next to each other using floats (i.e., columns or links), it's pretty simple to float them to opposite sides (example):
.first-element { float: right; }
.second-element { } //whatever
As pointed out by #artSx in the comment below, I realize you may not be able to add a class in your HTML. If there aren't already any classes or IDs that differentiate the two elements, you'll have to read up on different types of selectors (like nth-child and so on).
However, if you wanted to completely reposition the elements relative to the page or a parent div, you may want to read up on how absolute/relative positions work and how they'll affect the flow of your page.
There are likely multiple ways to achieve this. We'd need some legitimate examples of what you're trying to do in order to give you the method that works best for your situation.