asked on

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!

COBOLdinosaur

Using the same id on more than one element is invalid code. Uses a class on the ones you want to target.

Cd&

Gary

As Cd& said you have to use classes then

div.post:last-child {border-bottom:none}

christamcc

ASKER

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

Gary

Make sure you have a doctype, this is sufficient

<!DOCTYPE HTML>

also note this doesn't work in <IE9

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

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

christamcc

ASKER

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

Chris Stanyon

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.

Gary

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

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

christamcc

ASKER

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.