Style elements for children based on counting within their parent

Question

This is a generated example to represent a type problem that I use daily when I use a content management system that adjusts HTML for multiple web pages, and I need general ways to apply CSS to fit the layouts. I am wondering if there is a solution that does not support Javascript.

Suppose I have a div of some-div div class that will have 1 or 2 child div s. When he has 1 child div , this child should have a red background; if it has 2 child divs, they should have blue backgrounds:

  <div class="some-class"> <div> <p>The background of this should be red.</p> </div> </div> <div class="some-class"> <div> <p>The background of this should be blue.</p> </div> <div> <p>The background of this should be blue</p> </div> </div> 

Is there a way to do this in CSS? Perhaps a hack?

Answer 1

Ok, I'll be a cave. Here is my solution

http://jsfiddle.net/z7ajmh5z/

 .some-class div { background: blue; } .some-class div:first-child:last-child { background: red; } 

  <div class="some-class"> <div> <p>The background of this should be red.</p> </div> </div> <div class="some-class"> <div> <p>The background of this should be blue.</p> </div> <div> <p>The background of this should be blue</p> </div> </div> 

Edit

Apparently there is also a :only-child selector, which I found by looking at @LiorRaz's comment

It has about the same as :last-child

It’s worth at least a look. Here is a built-in example.

 .some-class div { background: blue } .some-class div:only-child { background: red; } 

  <div class="some-class"> <div> <p>The background of this should be red.</p> </div> </div> <div class="some-class"> <div> <p>The background of this should be blue.</p> </div> <div> <p>The background of this should be blue</p> </div> </div> 

Answer 2

you can target the div using css pseudo FIDDLE HERE

CSS

 .some-class div:only-child { background: red; } .some-class div:not(:only-of-type) { background: blue; } 

Answer 3

For modern browsers that support :nth-last-of-type ( http://www.w3.org/TR/selectors/#nth-last-child-pseudo )

 .some-class div{ background-color: red; } .some-class div + div, .some-class div:nth-last-child(2){ background-color: blue; } 

Demo at http://jsfiddle.net/gaby/ofhb3hj1/

Answer 4

Yes, you can do this with nth-of-type . Set all of them to background-color: red , then you can target each .some-class starting from the 1st and rewrite the div color to blue:

 .some-class div{ background-color: red; } .some-class:nth-of-type(1n+2) div{ background-color: blue; } 

Fiddle

UPDATE FOR ckuijjer

Who said: don't think this is a solution. The question is can you color the child <div> a red if there it the only child and blue if there are two children. don't think this is a solution. The question is can you color the child <div> a red if there it the only child and blue if there are two children.

Yes, you can. Here's how:

 .some-class:nth-of-type(1n+2) div:first-child{ background-color: red; } .some-class:nth-of-type(1n+2) div:nth-of-type(1n+2){ background-color: blue; } 

Fidddle

The bottom line is how to do it, regardless of what the OP tried to portray in his / her explanation, and regardless of whether he or anyone else understood what he / she really wanted, the answer (name of the question : Is it possible to do this with only CSS? ): Yes, this can only be done using CSS. You just need the right equation.

Answer 5

Just add a class to all the ones you want red, and separate for everything you want is blue. Example:

 <div class="some-class"> <div class="red"> <p>The background of this should be red.</p> </div> </div> <div class="some-class"> <div class="blue"> <p>The background of this should be blue.</p> </div> <div class="blue"> <p>The background of this should be blue</p> </div> </div> .blue { background: blue; } .red { background: red; }