CODEWITHSUNDEEP
htmlcsscss-selectors
user4392456
user4392456

Reputation:

Style children elements based on the count within their parent

This is a made-up example to represent a type of problem I have on a daily basis, when I'm using a content management system that sets up the HTML for tons of webpages and I need general ways of applying CSS according to mockups. I'm wondering if there is a non-Javascript way of solving it.

Suppose I have a div of class some-div, which will either have 1 or 2 child divs. When it has 1 child div, that child should have a red background; when 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 of doing this in CSS? A hack, perhaps?

Upvotes: 8

Views: 659

Answers (5)

Horray
Horray

Reputation: 693

Just add a class to all the ones you want red, and a separate one to all that you want 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;
}

Upvotes: -1

Ghostff
Ghostff

Reputation: 1458

you can target the div with css pseudo FIDDLE HERE

CSS

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

Upvotes: 8

jmore009
jmore009

Reputation: 12923

Yes you can do this with nth-of-type. Set all of them to background-color: red then you can target every .some-class starting after the 1st one and overwrite the div color to be 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>'s a red if there it's the only child and blue if there are two children.

Yes you can. Here is 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

Bottom line is this is how to do it, no matter what the OP was trying to portray in his/her explanation and whether or not I or anyone else understood what he/she actually wanted, the answer (question title was: Is it possible to do this with only CSS?) is: yes, it can be done with just CSS. Just need the right equation.

Upvotes: 4

Joseph Marikle
Joseph Marikle

Reputation: 78520

Well, I'll cave. Here's 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 the :only-child selector which I found by looking into @LiorRaz's comment

It has about as much support as :last-child

Would be worth at least looking into. Here's an embedded 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>

Upvotes: 11

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

For modern browsers that support the :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/

Upvotes: 5

Related Questions