CSS3 child combinator with *

Question

I'm trying to use a CSS3 child combinator ( > ) to set any child of a div to max-width: 100%;. In combination with box-sizing:border-box;, I'm trying to set it so that any content of a div is never larger than the containing div.

* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
div > * {
    max-width: 100%;
}

Now I have an image inside a div:

<div style="width: 70%;">
    <img src="foo" width="750" height="200" />
</div>

If 750 pixels is wider than the div's 70% width, the image breaks out of the div. If I change the CSS to:

div > img {
    max-width: 100%;
}

...then the image shrinks to fit the div (which is what I want). What am I missing here? Is there a known issue where the wildcard * just doesn't work in this situation?

Jonathan · Accepted Answer · 2017-09-27 19:51:09Z

1

Child selector support (>) dates base to IE 7 and the universal selector (*) dates back to IE 7 as well (unless you are using a namespace)

For an image you will need a height of auto to prevent it from stretching.

* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
div > * {
    max-width: 100%;
    height: auto;
}

<div style="width: 70%;">
    <img src="http://placehold.it/750x200" width="750" height="200" />
</div>

edited Sep 27, 2017 at 19:51

answered Sep 27, 2017 at 19:39

Jonathan

6,5375 gold badges40 silver badges49 bronze badges

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

2 Comments

Jonathan Over a year ago

OK. In my example, is using div > * working like you want? jsfiddle.net/mnck9qh7

Stephen R Over a year ago

Your code works, which made me reexamine my own code more closely (the OP was a simplified version). Some styling was creeping in from elsewhere and messing things up.

Collectives™ on Stack Overflow

CSS3 child combinator with *

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related