Basic CSS selector syntax, combining multiple ids and classes
I want to be able to select any of the four individual spans below by their id and class (and nothing else) but I can't seem to find the right syntax... "#id1 .class2" and "#id2 .class2" select the two right hand elements OK but "#id1 .class1" and "#id2 .class1" seem to select both elements where I'd expect them to select only the first span in the p.

    <html>
        <head>
            <style>
                #id1 .class1{ background: red; }
            </style>
        </head>
        <body>

            <p id="id1">
                <span class="class1">one<span> 
                <span class="class2">two<span> 
            </p>
        
            <p id="id2">
                <span class="class1">three<span> 
                <span class="class2">four<span> 
            </p>

        </body>
    </html>
Basic CSS selector syntax, combining multiple ids and classes
===

I want to be able to select any of the four individual spans below by their id and class (and nothing else) but I can't seem to find the right syntax... "#id1 .class2" and "#id2 .class2" select the two right hand elements OK but "#id1 .class1" and "#id2 .class1" seem to select both elements where I'd expect them to select only the first span in the p.

    <html>
        <head>
            <style>
                #id1 .class1{ background: red; }
            </style>
        </head>
        <body>

            <p id="id1">
                <span class="class1">one<span> 
                <span class="class2">two<span> 
            </p>
        
            <p id="id2">
                <span class="class1">three<span> 
                <span class="class2">four<span> 
            </p>

        </body>
    </html>