Are Alternate Nested Styles Possible in CSS

Are alternate nested styles possible in CSS?

As Mr Lister pointed out, nth-of-type works on one level (that of the parent of the selected div).

As far as i know and after looking through the W3C CSS3 Selectors there doesn't appear to be any css selectors for traversing through nesting (except the > selector, which only looks at the direct child of parent).

I would love te be proven wrong though as that could be very usefull.

So the only (css) solution would be the one you already stated: div > div > div {background: white; }
Can't you just generate this along with the generation of the div's?

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.

Styling blockquotes with alternating colors

According to Are alternate nested styles possible in CSS?:

there doesn't appear to be any css selectors for traversing through nesting (except the > selector, which only looks at the direct child of parent).

That being said, this isn't possible for a nesting of blockquotes arbitrarily deep. So the best (and probably only way) to do so is something along the lines of

.reply > blockquote.reply { ... }
.reply > blockquote.reply > blockquote.reply { ... }
.reply > blockquote.reply > blockquote.reply > blockquote.reply { ... }

and so on.

how to alternate based on how many specific parents deep a child is nested

I was able to answer my own question:

:not(.specialid) *:not(.specialid) .specialid *:not(.specialid) .specialchild{
  /*styles*/
}

Alternating row colours in CSS with nested levels

Such implementation is not possible via css only. You will have to use javascript. Also, usage of JS shouldn't cause such horrible performance. Just have JS check and update whenever new values are added or removed. Then, we're talking about a performance of linearly dependent on number of rows. Hardly different from the browser trying to figure it out from css rules if it were possible (also linearly dependent on number of rows or worse).

Hierarchical / nested styles in LESS

As far as i know .item .title is the only way to select a .title inside a .item (.item > .title as mentioned by @Oriol possible also works in some situations). Less enables you to nested this relation.

When you don't need that relation, you should not nest it in your Less code too. Possible use comments to make clear that a group of selectors belongs to a certain other selector. Alternatively consider the BEM methodology, see http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/, then .item .title can be written as item__title {}.

---

Related Topics