Alternate Background Colors for List Items

Alternate background colors for list items

How about some lovely CSS3?

li { background: green; }
li:nth-child(odd) { background: red; }

Lists with alternating colours for the list items

This is due to the way that you are outputting the HTML, for each list you are generating all items so the nth-child is still being applied to the DIV even if it has no content inside. You would need to adjust the HTML:

<div class = "ItemList">
    {% for todo in todos %}
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
    {% endfor %}
</div>

SwiftUI List with alternate background colors

I use something along these lines to alternate list background colours in my SwiftUI lists

List {
    ForEach(items.indices) { index in
        Text(items[index])
            .listRowBackground((index  % 2 == 0) ? Color(.systemBlue) : Color(.white))
    }
}

improve readability by alternating background colors in a list

we use simple mod logic, to determine even rows for alternate colors,

An even number % 2, will always return 0, while an odd % 2 will always return 1 ,using this logic we use i index such as,
(i % 2 == 0) ? even row : odd row

<View style={{flex: 1}}>
      {
        this.state.displayArray.map((item, i) => (
          <ListItem key={i} 
                    bottomDivider
                    //check mod for even odd rows and assign color
                    style={{backgroundColor: i % 2 === 0 ? '#000' : '#ccc' } 
                    onPress={() => this.props.navigation.navigate('ProductDetails', {productId: 
                    parseInt(item.id)})}>
                <Icon name='shopping-cart' />  
                <ListItem.Title style={styles.listTitle}>{item.name}</ListItem.Title>
                <ListItem.Subtitle style={{ color: '#F78400'}}>{i18n.t("information.cost")}: 
                   {item.cost}</ListItem.Subtitle>                  
                 </ListItem>
                ))
              }
</View>   

Alternate Row Colors UL LI

First, you should move the <ul> echo outside of the while loop. You only want a single <ul> element wrapping all of your <li>'s. That may honestly be intentional, but thought I should tell you nonetheless.

Next up, your provided CSS is targeting the <ul> element itself, rather than the markup inside of them. And, finally, anchor elements have default styling in web browsers – that's why they're blue currently.

ul li:nth-of-type(odd) a {  color: #ccc;}

<ul> <li>  <a href="http://www.coindesk.com/ether-prices-surge-shadow-bitcoin-dash/" style="text-decoration: none;">dash bubble overshadows ethereum upswing...</a> </li> <li>  <a href="https://www.reddit.com/r/ethtrader/comments/5xdcv8/asia_is_late_to_the_party_%E4%BA%9A%E6%B4%B2%E6%99%9A%E5%88%B0%E6%99%9A%E4%BC%9A/" style="text-decoration: none;">ethereum rises despite absent eth / cny markets...</a> </li> <li>  <a href="https://news.vice.com/story/bitcoins-are-more-expensive-than-gold-now-thanks-china" style="text-decoration: none;">is the devalued yuan moving bitcoin...</a> </li> <li>  <a href="http://fortune.com/2017/03/03/bitcoin-pricing-record/" style="text-decoration: none;">traders optimistic about the etf...</a> </li></ul>

CSS Nested lists items and alternate background

Here is one potential solution: https://jsfiddle.net/qmdwpzt8/3/

Not sure if all your requirements will be met by it, but I updated your list with div's:

<ul>
    <li><div>Item 1</div>
        <ul>
            <li><div>Item 1-1</div></li>
            <li><div>Item 1-2</div>
                <ul>
                    <li><div>Item 1-2-1</div></li>
                    <li><div>Item 1-2-2</div></li>
                </ul>
            </li>
            <li><div>Item 1-3</div></li>
        </ul>
    </li>
    <li><div>Item 2</div>
        <ul>
            <li><div>Item 2-1</div>
                <ul>
                    <li><div>Item 2-1-1</div></li>
                </ul>
            </li>
        </ul>    
    </li>
    <li><div>Item 3</div></li>
    <li><div>Item 4</div></li>
</ul>

And then add background colors with jQuery:

$( document ).ready(function() {
    var b = true;
    $( "div" ).each(function( index ) {
        b = !b;
        if (b) {
            $(this).css("background-color", "#ff0000");
        } else {
            $(this).css("background-color", "#00ff00");
        }            
    });
});

This does depend on jQuery/Javascript.

Alternate color for listview item UWP

You just need to extend your already extended AlternatingRowListView control a bit to achieve what you need.

You can monitor whenever an item gets removed from the list by subscribing to the VectorChanged event of the Items, and then you just loop through all the already realized items below(visually) the removed item and change their background colors accordingly.

Something like this would do -

public AlternatingRowListView()
{
    DefaultStyleKey = typeof(ListView);

    Items.VectorChanged += OnItemsVectorChanged;
}

private void OnItemsVectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs args)
{
    // When an item is removed from the list...
    if (args.CollectionChange == CollectionChange.ItemRemoved)
    {
        var removedItemIndex = (int)args.Index;

        // We don't really care about the items that are above the deleted one, so the starting index
        // is the removed item's index.
        for (var i = removedItemIndex; i < Items.Count; i++)
        {
            if (ContainerFromIndex(i) is ListViewItem listViewItem)
            {
                listViewItem.Background = i % 2 == 0 ? 
                    new SolidColorBrush(Colors.LightBlue) : new SolidColorBrush(Colors.Transparent);
            }
            // If it's null, it means virtualization is on and starting from this index the container
            // is not yet realized, so we can safely break the loop.
            else
            {
                break;
            }
        }
    }
}

---

Related Topics