CODEWITHSUNDEEP
htmlcssrowsalternate
calebmiranda
calebmiranda

Reputation: 166

Mimic alternate row in html

I have a website with a list of <div>s being displayed. The <div>s have alternate background-color based on :nth-child(odd) and :nth-child(even). No problem at all with that.

What I need is a way to make the alternate background-color even after the last div. Sort of how Mac OS Finder Window works (is the inspiration of the client).

How to do that? Is there any way other than the clunky "create empty divs"?

image of mac folder in list view:

enter image description here

Upvotes: 0

Views: 222

Answers (2)

awhitson
awhitson

Reputation: 1

If you're looking to do this with CSS and your list html is wrapped in tags you could assign a background or background-color property in a class to that tag. (JSFiddle).

HTML

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

li:nth-child(odd) {
    color: white;
    list-style: none;
    background-color: blue;
    margin-left: -40px;
}
li:nth-child(even) {
    color: white;
    list-style: none;
    background-color: gray;
    margin-left: -40px;
}
.list {
    padding-bottom: 18px;
    background: gray;
}

If you're list is not wrapped in UL tags then you may want to reconsider how you've got your html structured.

Upvotes: -1

jeffjenx
jeffjenx

Reputation: 17457

Your best bet would be to use a background image or background gradient to get the repeating pattern in the container element.

The disadvantage would be if the alternating divs were of varying heights.

Example (jSFiddle for visual):

#container{
   background-image: -webkit-repeating-linear-gradient( 90deg, 
    lightgray,
    lightgray 10px,
    white 10px,
    white 20px
  );
}

Try experimenting with different units (i.e. EMs instead of pixels) and you should be able to achieve something close to the Finder background. Note, you likely will need to use vendor prefixes for browser compatibility.

Upvotes: 3

Related Questions