Zebra striping a flexbox table with wrapping items

by

Ideally, the selector you want would target the even values contained in the style attribute. Something like this:

.Rtable > div[style*="order"][style*={even}] { ... }

Basically, this fantasy selector says: target all divs with a style attribute that contains (*) the values “order” and an even number.

It could be simplified to just:

.Rtable > div[style*={even}] { ... }

But this sort of CSS magic doesn’t exist, to my knowledge. (CSS Selectors 3 complete list)

Selectors 4 offers an enhanced :nth-child() pseudo-class, which may be able to accomplish such zebra striping. But this isn’t ready for prime time.

For now, I would say the simplest CSS method for accomplishing your goal…

I am looking for the simplest way to zebra stripe rows in the following responsive flexbox table.

… would be to add a class to each element with an even order value.

And with a slight adjustment to your media query, the zebra striping works on different screen sizes.

.Rtable {
  display: flex;
  flex-wrap: wrap;
}

.Rtable-cell {
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;
}

h3 { margin: 0; }

/* NEW */
.stripe { 
  background-color: black;
  color: white;
}

/* ADJUSTED */
@media all and (max-width: 500px) {
  .Rtable {  display: block; }
  .stripe { background-color: white; color: black; }
  .Rtable-cell:nth-child(even) { background-color: black; color: white;}
}
<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell stripe">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Longclaw</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:4;" class="Rtable-cell stripe">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Needle</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:4;" class="Rtable-cell stripe">Female</div>
  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>

</div>

JSFIDDLE DEMO

More Related Contents:

  1. How to place elements like this
  2. Flexbox code working on all browsers except Safari. Why?
  3. How to center a flex container but left-align flex items
  4. Why do browsers match CSS selectors from right to left?
  5. flex property not working in IE
  6. Last margin / padding collapsing in flexbox / grid layout
  7. Equal width flex items even after they wrap
  8. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  9. How to center elements on the last row in CSS Grid?
  10. Is there a CSS selector for the first direct child only?
  11. input / button elements not shrinking in a flex container
  12. How can I combine flexbox and vertical scroll in a full-height app?
  13. Why isn’t object-fit working in flexbox?
  14. text-overflow is not working when using display:flex
  15. Removing margin from flex items when they wrap
  16. Flexbox alternative for IE9
  17. :not(:empty) CSS selector is not working?
  18. Prevent flex items from stretching
  19. How to exclude particular class name in CSS selector?
  20. Flex items not respecting margins and box-sizing: border-box
  21. Flex item should align left, not center, when it wraps
  22. CSS select elements with partial id
  23. Select first occurring element after another element
  24. CSS selector for empty or whitespace
  25. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  26. Why are some of my CSS rules not working?
  27. How can I target a specific column or row in a CSS grid layout?
  28. What are the default values for justify-content & align content?
  29. Sizing flex items on the last row
  30. How can I get a specific number child using CSS?

Leave a Comment