CODEWITHSUNDEEP
csscss-selectors
Kjell Rilbe
Kjell Rilbe

Reputation: 1499

CSS selector for node with at least N children?

I would like to select nodes that have at least N children using CSS. How?

The purpose is to apply color bands ("guidelines") in a tree, but only if there are six or more nodes below the parent.

The JS, JQuery and server-side scripting suggestions I got are somewhat problematic because the children are most loaded dynamically using Ajax calls. I'd have to hack the code that injects the children to be able to e.g. add a class to those parents that have 6+ children. That's why I wanted to ask if there is a pure CSS way to do it, before I made the effort with code. I might just settle for banding regardless of child count - not as neat but fair enough.

Upvotes: 3

Views: 2062

Answers (4)

Jozsef Kerekes
Jozsef Kerekes

Reputation: 218

Well css3 has some child selectors that could do the job.

li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
    ... some style
}

For this solution the credit goes to André Luís who discovered it. Of course it doesn't work on the parent element, because that's css4 and not supported yet. But you could style all the li tags if there are 6, or just the first li tag.

In combination with before pseudo element you could make a parent styling visually. The ul get's position:relative. Then you could fake styling on parent with a pseudo element:

li:first-child:nth-last-child(6):before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:400px;
  height:20px;
  background:green
}

The css selector nth-last-child is not supported in every browser, but for Internet Explorer you could use javascript or IE7.js. Good luck.

Upvotes: 1

WarrenBee
WarrenBee

Reputation: 107

I recommend using a jQuery if-statement that will count the nodes then add a class to apply your desired styles.

Here is a working example: http://jsfiddle.net/WarrenBee/YeJyy/5

$(document).ready(function() {

    var nodeCount = $('.node').length;

    if( nodeCount > 6 ) {
        $('.node').addClass('nodeStyles');
    }

});

Upvotes: 1

KatieK
KatieK

Reputation: 13843

This is not strictly possible because CSS does not provide any method for selecting parents based on the properties of the children.

For a strictly CSS solution, I would add a class to the parent element, and style that class. Instead of manually adding the class where necessary, you could handle it pro grammatically on the server-side.

You can certainly do this using JavaScript, and the process will be simplified by the many available JavaScript libraries.

Upvotes: 0

Justin Lau
Justin Lau

Reputation: 360

CSS have no parent selectors of any kinds yet.

You can, however, use JavaScript to do so. The following is a jQuery example (Fiddle):

HTML

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

JavaScript:

jQuery(function($){
    $('ul').each(function(){
        if($(this).children('li').length >= 6){
            $(this).css('background-color', 'orange');
        }
    });
});

Upvotes: 0

Related Questions