सबसे पहले एक कंटेनर को पंजीकृत किया जाना चाहिए, और उससे पूछताछ की जा सकती है।

एक कंटेनर पंजीकृत करें

कंटेनर को पंजीकृत करने के लिए चयनकर्ता का उपयोग करें।

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

या, शॉर्टहैंड विकल्प का उपयोग करें

.parent {
    container: myname / inline-size;
    ... other code
}

पंजीकरण के समय, दो विवरण - प्रकार और नाम - निर्दिष्ट करना होगा।

कंटेनर प्रकार

कंटेनर-प्रकार: ...

• आकार
• इनलाइन-आकार
• सामान्य

कंटेनर का नाम

कंटेनर-नाम: ;

कंटेनर की पहचान विशेष रूप से उपयोगी है यदि आपके पास कई कंटेनरों का परिदृश्य हो।

एक कंटेनर से पूछताछ करें

कंटेनर क्वेरी @container at-rule से शुरू होती है जिसके बाद कंटेनर का नाम और फीचर क्वेरी आती है।

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

यदि फीचर की चौड़ाई 30ch से अधिक है, तो myname कंटेनर के अंदर div के लिए फ़ॉन्ट-आकार को 3em पर सेट करने के लिए कंटेनर क्वेरी।

क्वेरी करने के लिए सुविधाएँ

आकार-क्वेरी...

• चौड़ाई
• ऊंचाई
• इनलाइन-आकार
• ब्लॉक-आकार
• आस्पेक्ट अनुपात
• अभिविन्यास

शैली-क्वेरी...

• शैली(संपत्ति: मूल्य)

मूल्य के लिए संपत्ति की जांच की जाएगी।

उदाहरण के लिए

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

यदि कंटेनर कॉन्टनाम का पृष्ठभूमि रंग नीला है तो शैलियों को लागू करने के लिए कंटेनर क्वेरी

यौगिक प्रश्न

और, या और नहीं, का उपयोग मिश्रित प्रश्न बनाने के लिए किया जा सकता है

उदाहरण के लिए

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

नेस्टेड कंटेनर क्वेरीज़

कंटेनर क्वेरीज़ को अन्य कंटेनर क्वेरीज़ में नेस्ट किया जा सकता है।

उदाहरण के लिए

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }