Get a free trial // Grow your CSS skills // Land your dream job

CSS stripes white/grey + grey/white

  • # July 1, 2014 at 5:39 am

    Hi there!
    I have a goal:

    To make 2 blocks in row to be “white / grey” and the next row is “grey / white”
    Cant make it when its 45% width, but its ok as its has to be, when 100% width.
    My pain is here:

    How can I fix it?

    # July 1, 2014 at 6:29 am

    Well if I understand what you are asking. You could do an :nth-child(3n+1) selector. So set all of the blocks to grey originally, then use that rule to add in the white.

    But if I’m wrong I will need more detail.

    # July 1, 2014 at 6:39 am

    No. Thats not it. If blocks are more then 4, then “bad things” are happening. So my needs are like chess board (black/white/black/white), but when in row only 2 blocks. See again

    # July 1, 2014 at 6:48 am

    3n+1 does quite do it unfortunately.

    I think it would take more than one nth-of-type statements and they may be overlapping

    # July 1, 2014 at 6:52 am

    Well, just as I thought… may be in future there will be a chess mode 8)

    By the way, is there any possibility to force Safari wrap this blocks, as it does Chrome or any other “normal” browsers?

    # July 1, 2014 at 7:16 am

    As Paulie states, you need two statements

    # July 1, 2014 at 7:38 am

    Damn…didn’t know it would be that easy.


    Sometimes I can’t see the wood for the trees..

    # July 1, 2014 at 7:46 am

    Thanks alot, guy… never made it above 3 (3n+… etc). And what about other small question?

    –is there any possibility to force Safari wrap this blocks, as it does Chrome or any other “normal” browsers?–

    # July 1, 2014 at 8:13 am

    Oh, and another one: how to put it back to odd or even, when 100% width of this blocks?

    # July 1, 2014 at 8:13 am

    Not sure what you mean by ‘force Safari wrap this blocks.’

    You’ll need to be much more specific – what exactly are you trying to do? What happens at 20%, 50%, 90%, 100%? How do the ‘blocks’ get those widths to begin with?

    # July 1, 2014 at 8:14 am

    Safari doesnt “drop” these blocks on the next line. In my example

    # July 1, 2014 at 8:15 am

    It does for me. What version and platform?

    # July 1, 2014 at 8:17 am

    Version is 5.1.7 on Win7


    oh, I see its not the very last one… ok, thanks, thats my trouble.

    # July 1, 2014 at 8:22 am

    Oh, I see now. Looking into it

    # July 1, 2014 at 8:30 am

    if you will be able to fix it I’ll dring a cup of cold beer for you! *) cuz many of my pages have this trouble.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed