10 Replies - 2327 Views - Last Post: 15 February 2012 - 11:29 AM

#1 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Can't get last-child to work with styling forms in CSS

Posted 13 February 2012 - 08:36 PM

I am having some problems with styling my form. I need 3 input boxes for the date. The first 2 are the same size and the last one is a little bigger (for the year). I have been messing around with last-child but i can't get it to work.

My HTML code:
				<div class="section">
					<label for="start"> Earliest start date? 
					<span class="red"> * </span> </label> </br>
					
					<input type="text" name="MM" id="start" /> /
					<input type="text" name="DD" id="start" /> /
					<input type="text" name="YY" id="start" /> </br>
					<span class="underline"> MM &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
					DD &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YYYY </span> </br>
				</div>	



My CSS code:
#start{width: 30px;
}
.start input.last-child text{width: 50px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Can't get last-child to work with styling forms in CSS

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Can't get last-child to work with styling forms in CSS

Posted 14 February 2012 - 01:54 AM

that's because last-child is a pseudo class (they use : not .), i.e.

.start input:last-child text

This post has been edited by Dormilich: 14 February 2012 - 01:55 AM

Was This Post Helpful? 0
  • +
  • -

#3 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 12:21 AM

ooooh ok. Thanks.

I added that in. But it still isn't working.. I'm at my wit's end with this one.

I suppose i could add a different id for those boxes that need different sides.

Or is there a way to create several different textbox's for the same label under the same input statement. Like a broken textbox for serial codes and whatknot?
Was This Post Helpful? 0
  • +
  • -

#4 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 03:36 AM

For last-child to work, you need to wrap the inputs in a div, for example if you take a look at this test I did with your code: http://jsfiddle.net/qAanA/ you'll see that it works.

Also, your break tags are wrong, they should be: <br />
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 04:40 AM

View Postrevolutionx, on 15 February 2012 - 11:36 AM, said:

Also, your break tags are wrong, they should be: <br />

nope, they’re not wrong. self-closing tags are only required in XHTML served as "application/xhtml+xml". HTML 4 explicitly forbids it and HTML5 allows it. though no browser will complain unless you’re in XML mode.
Was This Post Helpful? 0
  • +
  • -

#6 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 08:42 AM

I took a look at the code sample you provided from mine with the container tags. When you change the size of the last child the textbox doesn't change. Thanks though!

Also my </br> tags did work but didn't validate. So i had to change them to <br />. You where both right there. :)
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 08:44 AM

you’re right there.

PS. only in XHTML you can do: <br></br> *gg*
Was This Post Helpful? 0
  • +
  • -

#8 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 08:46 AM

Can you post your latest code + CSS?
Was This Post Helpful? 0
  • +
  • -

#9 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 08:52 AM

I got it to work adding in a second ID but i don't think this would help me if i was going to actually make this form do anything. But i need to submit this code tonight so im submitting this so far. I still would like to figure it out though for future use.

HTML:

<div class="section">
					<label for="start"> Earliest start date? 
					<span class="red"> * </span> </label> <br/>
					<input type="text" name="MM" id="start" /> /
					<input type="text" name="DD" id="start" /> /
					<input type="text" name="YY" id="start2" size="50" /> <br/>
					<span class="underline"> MM &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
					DD &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YYYY </span> <br/>
				</div>	



CSS:

#start{width: 30px;
}

#start2{width: 50px;
}



*edit* took out that size="50" that wasn't doing anything
Was This Post Helpful? 0
  • +
  • -

#10 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 09:02 AM

You need to wrap just the inputs in a div. So for example you could do this:

<div>
	<input type="text" name="MM" id="start" /> /
	<input type="text" name="DD" id="start" /> /
	<input type="text" name="YY" id="start2" size="50" />
</div>


That way it's the last-child in that div.

And for the CSS
.section input[type="text"]:last-child {border:1px solid red;}

Was This Post Helpful? 0
  • +
  • -

#11 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Re: Can't get last-child to work with styling forms in CSS

Posted 15 February 2012 - 11:29 AM

i tried that but i didn't work. In the example code that was posted it didn't work either. I fiddled with the numbers and it didn't change the size of the box.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1