How do you remove a background image?

[jtown]

I'm trying to vertically create a list of divs with a background image that makes a line in between each div so it looks like this:


DIV1
----------------

DIV 2
----------------

DIV3
----------------

The problem arises on the last DIV (in this case DIV3) and I don't want to display the background image. What's the best way to get around this without creating an entire div for the line? I want my output to look like this:

DIV1
----------------

DIV2
----------------

DIV3


If I have an entirely new div for DIV3 I have to copy the properties that DIV1 and DIV2 use and I'd like to avoid that.

Thanks!

[WebJoel]

<div style="....margin-bottom:2px dashed #000;"></div>
<div style="....margin-bottom:2px dashed #000;"></div>
<div style="....margin-bottom:2px dashed #000;"></div>
<div style="....margin-bottom:2px dashed #000;"></div>

<div style="...."></div>

Use "margin-bottom" and use no margin at all for the last DIV.

Since this can be a 'shared' attribute, let's make it a "class"

CSS:

.mains {....margin-bottom:2px dashed #000;}
.last {....}
HTML:
<div class="mains"></div>
<div class="mains"></div>
<div class="mains"></div>
<div class="mains"></div>

<div class="last"></div>

-says the same thing.

"...." assumes other style information like width, height, padding, margin, etc of the DIVs and if shared, included with the .mains and .last as appropriate.

The CSS method is the greatest... if DIV #1, #2, #3 and #4 are class="mains" and DIV #5 is class="last" and you ADD a sixth ("#6) DIV, give THAT class="last" and change #5 to class="mains"

-Easily editable/updateable this way.

And oh yeah, -no need really to use a background-image to do this, unless the background-image conveys some other need. I'd still use the CSS for the dashed/dotted line thing.

[jtown]

So in the CSS does the .last style have to have all the same info as .mains? That's what my main concern was because I don't want to have to have the same thing in two places where .mains + a bg image = .last. Meaning if I had to edit one I'd have to edit both.

Well the separator isn't just a dotted line, but I just said that to describe it easier.

[Ferret]

To expand on what has already been written: If you're just going to have 1 div that is different, you can use a local style in addition to the class:


<div class="main"> ... </div>
<div class="main"> ... </div>
<div class="main"> ... </div>
<div class="main"> ... </div>
<div class="main" style="background-image: none"> ... </div>

[jtown]

Awesome ... I like that solution a lot!