Is it possible to do this with only CSS, no JavaScript?

Question

An outline of the scenario is that I have a div of class some-class which will either have 1 or 2 child divs. Whenever it has 1 I want that child div (div.some-class > div) to have width: 100%;, but whenever it has 2 I want them (div.some-class > div:nth-of-type(1), div.some-class > div:nth-of-type(2)) to have respective widths of 60% and 40%. I can't modify the HTML because it's generated by a content management system.

Is there a CSS hack that could give me this behavior?

Nope, you are dealing with dynamic behavior here. Best thing is to create separate rules in CSS and simply apply them through JavaScript — beautifulcoder
– beautifulcoder, Commented Dec 19, 2014 at 18:24
@beautifulcoder Dynamic behavior doesn't require javascript; responsive design is often done through CSS alone. — admdrew
– admdrew, Commented Dec 19, 2014 at 18:34

Wex · Accepted Answer · 2014-12-19 18:30:19Z

3

Sure, use display: table and the adjacent sibling selector.

body > div {
    display: table;
    width: 600px;
}

div > div {
    background: blue;
    height: 100px;
    display: table-cell;
}

div > div + div {
    background: red;
    width: 40%;
}

<div>
    <div></div>
</div>

<hr>

<div>
    <div></div>
    <div></div>
</div>

answered Dec 19, 2014 at 18:30

Wex

15.7k10 gold badges68 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to do this with only CSS, no JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related