combining numerous css selectors fails

Question

I have a detailed css radio button I would like to use 45 times on the same page. The css is a little beefy so it make no sense to recreate the entry 45 times. But, when I try and combine multiple id tags, I get numerous errors (not displaying correctly)

HTML:

<div class="pcontainer">
        <section class="pmain">
                <div class="rblock">
                        <div class="squared1">
                                <input type="checkbox" value="None" id="squaredOne" name="check" />
                                <label for="squared1"></label>
                        </div>
                </div>
        </section>
        <nav class="pright">
                <div class="rblock">
                        <div class="squared2">
                                <input type="checkbox" value="None1" id="squaredOne" name="check" />
                                <label for="squared2"></label>
                        </div>
                </div>
        </nav>
....squared36
</div>

CSS:

.squared1, squared2 {
        width: 28px;
        height: 28px;
        background: #fcfff4;

        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
        margin: 20px auto;
        -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        position: relative;
}

.squared1, squared2 label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;

        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squared1, squared2 label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background: #00bf00;

        background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: linear-gradient(top, #00bf00 0%, #009400 100%);

        top: 2px;
        left: 2px;

        -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.squared1, squared2 label:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        opacity: 0.3;
}

.squared1, squared2 input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
}

How do I combine numerous CSS selectors? Is there a dynamic method in CSS?

Answer 1

You wrote wrong css selector:

Use, for example:

.squared1 label, squared2 label

instead of

.squared1, squared2 label

Commas allows you to write multiple selector, but all of them must be complete