0

I'm trying to do a CSS selection. I want to select an ID that's before another ID selector. This is the example:

<div id="wrapper">
     <div class="aside_left">Left content...</div>
     <div class="main_page">Main content...</div>
</div> <!-- end of wrapper -->

My objective is that the main_page stay on the left, and the aside_left change its position to the right.

Both the aside_left and the main_page have the property float:left I can't change the aside_left property to float:right because it is in many pages.

Is it possible to select the ID or CLASS that is before another ID?

My selector should be something like this: select the .aside_left that are before an .main_page

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Gekyzo
  • 41
  • 5
  • Generally this is not possible with pure CSS. However, what is present instead if `.main_page` is missing? (What does the html structure look like if on the other pages where there is no `.main_page`)? – ScottS Nov 25 '13 at 16:49
  • Also, you mention "ID" but your two div's are not by ID, but by classes in your example. – ScottS Nov 25 '13 at 16:51

3 Answers3

2

You cant do this with CSS selectors per se.. your best bet is to use something like jQuery's very accessible .parent() method.

You can see here for CSS3 and here for CSS2, this is not present in the current spec.

The speculative design for CSS4 does provide such a selector using a ! operator, but is not presently supported in any browser.

With this in mind, perhaps think about changing the logic behind what you're trying to do- can you not give the altered elements different class names to more easily identify them? Or progress down from your wrapper element?

Or, have a look into the nth-of-type selector, by using:

#wrapper .aside_left:nth-of-type(odd)

See THIS FIDDLE

This will select only the .aside_left elements which are the first child of the #wrapper element. The first child, as in the first in the DOM, as opposed to the first displayed (using float may visually produce results that dont reflect actual DOM positioning in which case you're back to using jQuery).

SW4
  • 69,876
  • 20
  • 132
  • 137
  • I don't know jQuery and I can't change the HTML code, all I can work with is the CSS stylesheet, that's why I wanted that strange selector. I already knew the nth-of-type selector, but is not exactly what I was looking for. I want to select only the aside_left if there's a main_page class in the page. The problem is that there are many combinations; aside_left + contact_page, aside_left + product_page, aside_left + category_page... and I just wanted to select the aside_left of the main_page. I will ask the webmaster to change the html code flow. Thank's ! – Gekyzo Nov 25 '13 at 17:00
  • @Gekyzo you're welcome, sorry there isnt a way to do what you're after in CSS – SW4 Nov 25 '13 at 17:01
0

Only if HTML Structure Cooperates is Pure CSS Possible

I noted in my comment and ExtPro has noted in his answer that such is not possible by pure css, at least under most conditions. However, there is one set of conditions that it is possible. That is if there end up being more child elements of #wrapper in the html when something other than .main_page is present. This would be a very specifc case requirement, and may not match your situation (probably not based off your comment to ExtPro), but if so, then this code works:

#wrapper > .aside_left:nth-last-of-type(2) {
    float: right;
}

See an example fiddle here. You see how this requires that there be two elements only in the case that the .main_page is there, and would demand more elements be present if .main_page is not there. So this technically does not key in on .main_page itself, but rather is using the html structure to change a preceding element based off the number of sibling elements present.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Wow, I didn't saw this posibility. I will try this and see if it crash. Thanks for your idea. – Gekyzo Nov 25 '13 at 17:27
0

in pure CSS you could use display:flex and order , despite position in the flow of .main_page : (hover it to see them both switching sides). 

 /* using your HTML */
 #wrapper {
  display: flex;
  flex-flow: row wrap;
  height:200px;
  width:80%;
  margin:auto;
}
#wrapper > div {
  width:20%;
  box-shadow:inset 0 0 1px;
  order:2;
}
#wrapper .main_page {
  width:80%;
}
#wrapper > div.aside_left {
background:gray;
}
#wrapper > div.main_page:hover {
  order:1;
}

live démo at http://codepen.io/gc-nomade/pen/Iywbj see some tips to use it here : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

You could as well reset direction on #wrapper if you style your 2 div as inl'ne-boxes and restore direction on the childs divs

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129