Can I select CSS siblings out of order? - css

Question

I'm trying to write css to style my columns automatically based on the elements on the page. There are several combinations of columns:
aside-article-aside
aside-article
article-aside
article
Each aside will have a class of either left or right, depending on which side of the screen it is on. The asides will always be a constant width no matter what the layout, but the article's width will change depending on the layout.
I want to use CSS (preferably without any javascript) to set the width of the article. I've been playing around with CSS siblings, but I can't quite get this to work. This is how I would theoretically like the code to work:
article{
/* just article */
width: some width;
}
.left~article{
/* aside-article */
width: some width;
}
.right~article{
/* article-aside */
width: some width; /* (this can be the same as the previous;
I don't know if it's easier to define
them together or separately) */
}
.left~.right~article{
/* aside-article-aside */
width: some-width;
}
The first two layouts work, bu the second two do not. The problem is that I always want to style the article, even if it is not the last in that section of the DOM. Using the selectors article~.right and .left~.article~.right for the last two layouts respectively finds the correct combination of layouts (i.e. either an article then an aside or an article between two asides) but then it targets the right-most aside and I can't change the style of the article.
Is there a way to take all siblings into account whether before the target element in the DOM using the sibling selectors in CSS? Or can anyone think of any "creative" ways I could get around this without having to use javascript?
Thanks!

Answer 1

CSS3 Solution
Assuming the containing element for these only has immediate children of either aside or article, then there is a CSS3 solution (so IE9+). For my example here, I am assuming an overall width of 400px and standard widths for aside elements (though that could be different).
aside {
width: 100px;
}
aside.left + article,
article:first-child {
width: 300px;
}
article:only-child {
width: 400px; /* overrides article:first-child if it is only-child */
}
aside.left:nth-last-of-type(2) + article {
width: 200px; /* only engages if there are two asides */
}