problem with nth child

[maya90]

hi,

I'm having a problem with nth-child(2)
it's applying style I have for nth-child(2) to both 1st and 2nd child

http://mayacove.com/dev/css/test_form.html

#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????? */

markup:

<input type="text" class="field_txt field_txt_fl" value="Length" placeholder="Length" />
<input type="text" class="field_txt field_txt_fl" value="Width" placeholder="Width"/>

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...

thank you...

[maya90]

PS: can't use 2nd-of-type because my understanding is it's not supported by IE

(can't test on IE)

[dresden_phoenix]

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.

[maya90]

I don't understand this...

#form_top section:nth-child(2) .field_txt_fl {float:left; width:174px; border:solid 1px green; }

this does NOT mean float the 2nd element of class field_txt_fl in the SECOND <section>???

Targets ALL elements with class .field_txt_fl that are within the second element in #form_top IF it's a SECTION tag.

oh man.. you lost me there.. maybe I'm too tired...

so there's no way to do this w/o giving that 2nd <section> in #form_top a class or id? (or a third class to that second text field? oh brother....)


thank you....


PS: this is also not working.. I don't get this...

#form_top section#two .field_txt_fl:nth-child(2) { }

this does NOT mean 2nd -- and only 2nd -- element with class field_txt_fl inside section#two???????

:-(


and if not, how DO I say 2nd element of class field_txt_fl WHEREVER THESE TWO ELEMENTS ARE OCCURRING ????????

this is driving me nuts...

[maya90]

even if I add a third class to that field it doesn't work..

  #form_top section .fl_right {float:right; border:solid 1px red;  }

UNLESS I add an id to the section and do

  #form_top section#two .fl_right {float:right; border:solid 1px red;  }

this also doesn't work..

#form_top section#two .field_txt_fl:nth-child(2) {float:right; border:solid 1px red;  }

I DON'T GET THIS AT ALL

so I HAVE TO add an id (or class) to that 2nd<section> AND a third class to that 2nd text field?? so much for the wonders of CSS3.... ;-)


this also doesn't work

#form_top section:nth-child(2) .fl_right {float:left; width:174px;  border:solid 1px green; }

(why doesn't this one work? no other element has this class... this is a THIRD class I have now added to that 2nd text field..)



thank you..

[maya90]

if this works..

#form_top section:nth-child(2) { border:solid 1px red;  }

which means SECOND SECTION INSIDE #form_top section

then why does this

#form_top section#two .field_txt_fl:nth-child(2) {....}

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.... :-(

thank you...

[maya90]

#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.

(italics mine...)

but this is what I have... it's not working......

[dresden_phoenix]

I don't understand what I'm missing here....

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; }

[ronpat]

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.

and more.

[maya90]

oh brother.. that's just grand..

ok.. thank you very much.....

[dresden_phoenix]

you still need to understand:
1) nth-child is NOT what causing your issue here.
2) 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.