Kevin Powell - Community•6mo ago

Is it possible to use container queries on container itself?

Hey guys, recently been trying to get back to container queries research, and found that styles don't apply on container itself. I think I saw Kevin do that in one of his videos, and now it doesn't work. Or maybe I'm trippin. Anyway example below didn't work. Google suggests using wrapper, but it doesn't go well when there is a list of such containers. I assume that I can use display: contents on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

4 Replies

MarkBoots•6mo ago

no, only on the childs (or pseudo elements). so probably you want to wrap the card in a div and make that the container. I know you have already considered that, but it's the only way as far as I know)

clevermissfox•6mo ago

I wonder if you could use custom properties for the bg/padding etc and then update those in the container query? Probably not . Also thinking you could use a css grid on the card to place everything, and pseudo element with grid-area: 1 / 1 / -1 /-1; and apply the styling for the bg etc on the pseudo element which could be altered in the query.

IncognitusOP•6mo ago

Custom properties is exaclty what gpt suggested, but unfortunatelly no. Any self style property is ignored, even custom.

clevermissfox•6mo ago

I played a bit with it and you can def use a pseudo element for the bg and the border issue but the padding is a problem , even if it’s a grid with faux padding that wouldn’t be able to be updated . You could use clamp and ems so that the padding adjusts with the width anyway or use minmax in the grid for the faux-padding

Gaming

Programming

Is it possible to use container queries on container itself?