First child selector not working

Question

I am trying to create a simple box system and I need to remove the right edge of the first child.

I tried both first-child and the first type and still cannot set up the target class correctly.

I have read several different examples and still cannot find a solution.

Please view the fiddle and help me remove the left edge from the first child.

.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; background-color: black; } .box { margin: 1% 0 1% 0; float: left; background-color: gray; box-sizing: border-box; color:white; } .box.full { width: 100%; margin-left: 0; } .box.half { width: 49%; margin-left: 1%; } .half:first-child { margin-left: 0; } 

Answer 1

The first element of the .half class .half not the first child element of .container . This is the second child, so your selector does not work.

I would suggest using

 .box.full + .box.half { margin-left: 0; } 

to indicate that any .box.half immediately following .box.full has the desired margin.

Answer 2

Are you really targeting your second child:

 .box.half:nth-child(2) { margin-left: 0; } 

Try this instead :)

 .box.half { width: 49%; } .box.half + .box.half { margin-left: 2%; } 

.box.half ONLY if the previous .box.half will have margin-left: 2% .

More than the left margin, no more than the right margin, 49 + 49 + 2 = 100, profit.

See the updated Fiddle: http://jsfiddle.net/Lvd44upd/3/

Answer 3

I used

 .box.half { width: 49%; } 

and

 .box.half:last-child { margin-left: 1%; } 

. Seems to work here .

Answer 4

This is because the field of the first half is not the first child of its parent, it is the second. So fast .box.half solutions: nth-child (2).