Question

I’m trying to figure out if there’s a way using only HTML and CSS to build elements within a page that are responsive to the other elements, rather than to the browser size as is with @media and traditional responsive design.

For example, I have an element that is 900px wide. It can sometimes contain 1, 2 or 3 child elements. I want the child elements to style and display additional elements depending on how many sibling elements there are.

Eg

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

vs

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

The child elements would appear differently – different widths, different padding, borders… and they would also have child elements which would be hidden in the first sample, but display in the second.

I know this can be done with JS, PHP… but I’m trying to see if there’s a way to do it without it. Since I also want to hide/show specific elements depending on the existence of other child elements, using relative sizes (eg %) doesn’t cut it.

Thanks

Answer 1

It’s possible with CSS3, it took me a couple of minutes to figure it out.

Check out http://jsfiddle.net/Vdz7s/.

HTML:

<h1>One:</h1>
<div class="parent">
    <div class="child">1</div>
</div>

<h1>Two:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>

<h1>Three:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>​

CSS:

.parent .child:nth-last-child(1)
{
    border:1px solid yellow;
}

.parent .child:nth-last-child(2),
.parent .child:nth-last-child(2) ~ .child
{
    border:1px solid orange;
}

.parent .child:nth-last-child(3),
.parent .child:nth-last-child(3) ~ .child
{
    border:1px solid red;
}
​

I think that the code is pretty self-explanatory, then you just need to target the children childs and do whatever you want with them.