#form_top section:nth-child(2) .field_txt_fl {float:left; width:174px; border:solid 1px green; }
/********************* it's doing this for both, not just the 2nd one.... ********************** */
#form_top section:nth-child(2) .field_txt_fl:nth-child(2) {float:right; border:solid 1px red; }
/* why is it applyilng .field_txt_fl:nth-child(2) TO BOTH fields with class .field_txt_fl????? */
you know, a simpler solution ( you know the two elements you are are targeting are the first two elements in the container and they are the first two elements might be “+”. Easier to understand and works in IE7+
Now on to the details of what you did:
nth-child() is a PSEUDO CLASS which attaches itself to the Nth element, if it matches the selector. So really may not get it matching… but it is impossible for it to over match.
#form_top section:nth-child(2) .field_txt_fl {float:left; width:174px; border:solid 1px green; }
Targets ALL elements with class .field_txt_fl that are within the second element in #form_top IF it’s a SECTION tag.
So you have floated BOTH .field_txt_fl, made them 174 pxs wide and given them green borders.
#form_top section:nth-child(2) .field_txt_fl:nth-child(2) {float:right; border:solid 1px red; } and this is working perfectly… as the .field_txt_fl that’s a second child… is in fact in on the right and red.
BUT WHY IS THE GREEN ONE ON THE RIGHT… you cry out…
(BTW, this is why you should present ALL your code) …
because you have floated its PARENT to the right … here:
fieldset#form_top section:nth-child(2) {margin-right:0; width:375px; float:right; }
so what you are seeing is not the first child floating to the right but the whole contraption floated right… and within it the first child floated left and the second floating right.
NOT mean 2nd element with class field_txt_fl inside SECOND SECTION INSIDE #form_top section ???
I don’t understand what I’m missing here…
this is for a test, they probably new I would have problems with this, that’s why they designed it like this… so now I’m done with my entire project but am stuck with this problem…
#form_top section:nth-child(2) .field_txt_fl:nth-child(2) {float:right; border:solid 1px red; } and this is working perfectly… as the .field_txt_fl that’s a second child… is in fact in on the right and red.
Well basically you are nesting, floating and sizing elements too much… also you are forgetting that CSS cascades.
I want ONLY the 2nd one to be floated right, not both…
it’s applying the borders (green & red) correctly, but not the float property, for some reason…
ONLY the second ( input)one IS being floated right. but in a previous rule you have floated the SECOND SECTION right and given it a width of 375px or so. So the green input can be at most 505px from the right. if you want to see what I mean change the width on this rule:
fieldset#form_top section:nth-child(2) {margin-right:0; width:375px; float:right; }
The :first-child selector is supported in all major browsers.
PS: can’t use 2nd-of-type because my understanding is it’s not supported by IE
neither is:
The :last-child selector is not supported in IE8 and earlier versions.
The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
The :first-of-type selector is supported in all major browsers, except IE8 and earlier.
The :last-of-type selector is supported in all major browsers, except IE8 and earlier.
The :nth-of-type() selector is supported in all major browsers, except IE8 and earlier.
if you wished to avoid nth child ( which is still not your issue) to select a SECOND ADJACENT element, you could use the adjacent selector …ala section + section {} this offers far more support… and i think you would find it easier to grasp . Essentially it selects the section immediately after a(any other) section, so if you are only dealing with a pair of sibling sections this is you selector ( if you have 3 or more then we need to think a bit…but that’s life.
Easier to understand and works in IE7+
