CSS - last element

If I have something like this:
<div id="wrapper">
  <div id="loop'>
 
<div id="post">
   stuff
<div id="inner-post">inner stuff</div>
</div>
<div id="post">
   stuff
<div id="inner-post">inner stuff</div>
</div>
<div id="post">
   stuff
<div id="inner-post">inner stuff</div>
</div>
 </div>
</div>

How would I get a bottom-border on all id="post" EXCEPT the last one?.  The number of divs  of id="post" will vary, so NOT only three as shown above.

Thanks!
christamccAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
last-child wont work in ie < 9.

you could use a sibling selector instead, and target all items but the first one and put the border on top.

.block-type-content .post + .post{
border-top:1px solid #dadada;
}
0
 
COBOLdinosaurCommented:
Using the same id on more than one element is invalid code.  Uses a class on the ones you want to target.

Cd&
0
 
GaryCommented:
As Cd& said you have to use classes then


div.post:last-child {border-bottom:none}
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
christamccAuthor Commented:
Sorry, ya, they are classes on the page... that was just a fast-typing/no-thinking demo error. :)  

Maybe I should show the real code because I had tried the last-child but I can't quite get it to work.

I have this:
.block-type-content .post {
	border-bottom: 1px solid #DADADA;
}

.block-type-content .post:last-child{
	border: 3px solid green; /*This is just to make the change stand out */

}

Open in new window


The bottom border on the post works, but the green border is not showing.

<section class="column column-1 grid-width-17 grid-left-0">
  <div id="block-145" class="front-page-content block block-type-content block-fluid-height">
		<div class="block-content">
		     <div class="loop">
			<div id="post-985" class="post-985 post type-post status-publish format-standard hentry category-archives category-stories category-style tag-carine-roitfeld tag-kate-moss tag-personal-style tag-style author-paula">
				<div class="entry_category_above"></div>
				<!-- .entry-meta -->
				<div class="entry-content">
					content
				</div><!-- .entry-content -->
				<div class="entry-utility entry-utility-below entry-meta">
				</div>
                         </div>
			<!-- Bottom border here -->
            
			<div id="post-971" class="post-971 post type-post status-publish format-standard hentry category-style category-visionaries tag-cruelty-free tag-fashion-designers tag-green tag-socially-responsible-businesses tag-stella-mccartney tag-sustainable author-paula alt">
				<div class="entry_category_above"></div>
				<!-- .entry-meta -->
				<div class="entry-content">
					content
				</div>
				<!-- .entry-content -->
			</div>
            <!-- NO Bottom border here -->
            
             </div><!-- end loop -->
       </div><!-- .block-content -->
  </div><!-- #block-145 -->
</section>

Open in new window

0
 
GaryCommented:
Make sure you have a doctype, this is sufficient

<!DOCTYPE HTML>


also note this doesn't work in <IE9
0
 
Chris StanyonCommented:
If you're creating your loop using some server-side code (php, etc.) then it may be just as easy to add classes to the DIVs, and select them using 'normal' CSS selectors.

<div class="block-type-content">
<div class="post first">
     stuff
     <div class="inner-post">inner stuff</div>
</div>

<div class="post">
     stuff
     <div class="inner-post">inner stuff</div>
</div>

<div class="post last">
     stuff
     <div class="inner-post">inner stuff</div>
</div>
</div>

.block-type-content .post { border-bottom: 1px solid #DADADA;}
.block-type-content .post.last { border-bottom: 3px solid green; }

Open in new window

0
 
christamccAuthor Commented:
Hi Kozaiwaniec,  your suggestion does work...  my concern was in those cases of browsers being <IE9, I would rather have a rogue bottom-border than top-border, so would prefer to use the last-child option if I could get it to work.

<!DOCTYPE HTML> is there and I am using Chrome

When I inspect the element in chrome I don't see that css from the last-child.

Chris, that WOULD create the most stable page... thanks for that suggestion.  I inherited this wordpress site, the post are output from a function.  I can edit that function if it comes down to it. But would really like to utilize the css or at least try to understand why the last-child isn't working. :)
0
 
Chris StanyonCommented:
As has already been pointed out, last-child won't work in IE<9. It's a CSS3 selector so will not be available in older, non-CSS3 browsers.
0
 
GaryCommented:
You missed the point of Kozaiwaniec suggestion, instead of bottom border you use top border on everything except the first element, unless your layout dismisses that working for you i.e. margins/padding
Part of the reason its not available in previous IE version is that MS thought whats the point of last-child when you can use first-child and achieve the same thing just by changing your logic....
0
 
Chris StanyonConnect With a Mentor Commented:
Another option: instead of editing your function, you could add a 'last' class using jQuery, if you've already got it loaded. That will allow you to use last-child selector, even in IE<9

$(".block-type-content .post:last-child").addClass('last');
0
 
christamccAuthor Commented:
Oh, I see, Gary, thanks for clarifying.  I was looking them up on the W3c and didn't notice the distinction between not being compatible and not being compatible unless DOCTYPE is defined.  oopsie. :)

Cool.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.