using nth-child & not in css selector

Question

I try to use css for build page layout. I want it to be as much content independent as possible.

The idea is to have 4 div in each row, and I did it using float:left for all div and :nth-child(4n+1) selector for clear:both. Some divs I want to be first in line (cr before), and i mark its by class="cr", but i want it to have 3 divs after in the same line, before cr (clear:both).

Target is to have:

Test Test
Test Test Test Test 
Test Test Test Test

Is it possible ? So far i'm here: http://jsbin.com/isowab/1/edit

Martin Turjak · Accepted Answer · 2013-04-02 09:37:32Z

5

What you want to do is to my knowledge not really possible in pure css (but I would be more than happy to be proven wrong).

If I understand you right ... you want the nth count to reset after every div of class .cr, rigt?

CSS unfortunately does not work that way. Every time you will assign a new nth rule it will apply for all elements of a type from beginning. Using the adjacent selector + or ~ you could do some of the magic ... for example to start applying the style with the nth rule only after the first occurrence of the .cr class

but there is no way to reset the nth counter after each div of class .cr.

You could do this by adding hierarchical structure or dynamically by assigning specific classes using javascript or serverside ... but NOT in pure css.

Edit: For example if you are using jQuery you could add something like this:

    var i=1;
    $("div").each(function(){
        if($(this).hasClass('cr') || i%5==0){
            $(this).addClass('cr');
            i=1;
        }
        i++;
    });

And in css apply clear:both; to the .cr class.

Here is this example in jsfiddle: http://jsfiddle.net/MJ29T/

edited Apr 2, 2013 at 9:37

answered Apr 2, 2013 at 8:16

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saram Over a year ago

Thanx for you answer. I followed hierarchical way before, and wondered whether data could be flat. I was tried selector like: DIV:not(.cr):nth-of-type(4n+1) & DIV:not(.cr)+DIV:not(.cr)+DIV:not(.cr)+DIV:not(.cr) but it also does not work that way :(

zengabor · Accepted Answer · 2013-04-02 11:57:59Z

2

Why don't you just make those rows explicit? Something like:

CSS

section > div { display: inline-block; background: green; }
section > div:nth-child(even) { background: blue; }

HTML

<section>
    <div>Test</div>
    <div>Test</div>
</section>
<section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
</section>
<section>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
</section>

I am using inline-block here because it's much simpler but if the gap between elements is an issue, you can float them or fight the spaces.

edited Apr 2, 2013 at 11:57

answered Apr 2, 2013 at 8:28

zengabor

2,0233 gold badges23 silver badges28 bronze badges

1 Comment

Saram Over a year ago

This is the way I find myself... but i want to remove this hierarchy, and apply css presentation to flat data

asedsami · Accepted Answer · 2015-12-09 02:58:53Z

1

HTML

<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>

CSS

div {
    height: 20px;
    width: 40px;
    display: block;
    background: red;
    float: left;
}
div:nth-child(4n-1){
    clear:both;
}
DIV:nth-child(2n) {
    background-color: blue;
}
DIV:nth-child(2n+1) {
    background-color: green;
}

FIDDLE

click here

edited Dec 9, 2015 at 2:58

asedsami

6897 silver badges26 bronze badges

answered Apr 2, 2013 at 7:05

Venugopal

1,8961 gold badge17 silver badges30 bronze badges

2 Comments

Saram Over a year ago

I think that this is fixed layout. I want it to be dependent on content, and it is not known where extra new line occurs (if any). <div class="cr">Test</div>

Jure Ravlić Over a year ago

I don't think that is the answer he was looking for. One of the requirements was to have div with floated to the left, with a class of .cr

Collectives™ on Stack Overflow

using nth-child & not in css selector

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related