• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 404
  • Last Modified:

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!
0
christamcc
Asked:
christamcc
  • 3
  • 3
  • 3
  • +2
2 Solutions
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

<!DOCTYPE HTML>


also note this doesn't work in <IE9
0
 
Kyle HamiltonData 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
 
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 StanyonCommented:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now