Alternate background color

  • Hello!
    How do i alternate the background color between these sections on the board list?

    I'm trying this short piece of CSS code, but it's not working properly.

    .wbbBoardContainer.wbbBoard:nth-child(even){

    background-color: white;}

    .wbbBoardContainer .wbbBoard:nth-child(odd){

    background-color:black;}

    In result only appears sections in black. Can someone help me?


    Thank you for your consideration.

  • Excellent, thank you!


    I just tried your code and while tinkering with it I noticed that you're missing a space in the selector. You wrote this code:

    CSS
    .wbbBoardContainer.wbbBoard:nth-child(even){
        background-color: white;
    }
    .wbbBoardContainer .wbbBoard:nth-child(odd){
        background-color:black;
    }

    The problem is the first selector, it targets all elements with the class .wbbBoardContainer that also have the class .wbbBoard. The second selector targets all .wbbBoard elements inside elements with the class .wbbBoardContainer. Adding the space should do the job:

    CSS
    .wbbBoardContainer .wbbBoard:nth-child(even){
    background-color: white;
    }
    .wbbBoardContainer .wbbBoard:nth-child(odd){
    background-color:black;
    }

    Alexander Ebert
    Senior Developer WoltLab® GmbH