Loop through css possible?

Question

I have used the same CSS code loads of times but just giving it different names. So basically I am calling the same CSS over and over but named differently. I feel like I should loop through it instead. Any ideas?

#block1{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block1.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}

#block2{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block2.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}

#block3{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block3.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}

#block4{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block4.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}

#block5{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block5.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}

Then in the HTML I do this:

        <button onclick="document.getElementById('block1').setAttribute('class', '');"> 
        <b><abbr title="Reports showing all cases with various display options."><span style='color:black;'>Current Status Reports</b></span></button><br>
            <div id="block1" class="a">
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_crprocess');">Current Status Report With Legal Process</a><br>
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus');">Current Status Report</a><br>
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_response');">Current Status Report With Last Response</a><br>
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_receipt');">Current Status Report With Last Receipt</a><br>
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_response_plantiff');">Current Status Report With Last Response and Plaintiff</a><br>
                <a href="javascript:GenerateReport( 'https://www.skerrys.com/oecgi.exe/dm_currentstatus_trxdte');">Current Status Report by Date Transferred</a><br>
                <button onclick="document.getElementById('block1').setAttribute('class', 'a');"><b>Hide -</b></button>
            </div>


        <button onclick="document.getElementById('block2').setAttribute('class', '');"> <b><abbr title="Reports showing current new business & demand letters sent to debtors.">New Business & Letters Before Action</b></button><br>
            <div id="block2" class="a">
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/DM_NewBusiness');">New Business This Period</a><br>
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/DM_LBASent');">Letter Before Action Sent</a><br>
                <a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/DM_CasesAwaitingInstructions_Issue');">Cases Awaiting Instructions to Issue</a><br>
                <button onclick="document.getElementById('block2').setAttribute('class', 'a');"><b>Hide -</b></button>
            </div>

You can use commas in the specifier, e.g. block1, block1.a, block2, block2.a, ... { ... } — Jon Egeland
– Jon Egeland, Commented Feb 10, 2015 at 14:45

LcSalazar · Accepted Answer · 2015-02-10 14:50:15Z

1

In your specific case, you could use the css attribute selector ^=, that is sort of a starts with selector:

[id^="block"] {
    /* your style */
}

[id^="block"].a {
    /* your style */
}

answered Feb 10, 2015 at 14:50

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

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

Comments

Spencer Wieczorek · Accepted Answer · 2015-02-10 14:50:56Z

0

For your current code you can change it to:

#block1, #block2, #block3, #block4, #block5 {
    display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;
}

#block1.a, #block2.a, #block3.a, #block4.a, #block5.a {
    display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;
}

But it may be better to just have a block class:

.block { display:block; ... }
.block.a { display:none; ... }

answered Feb 10, 2015 at 14:50

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Comments

Flynn1179 · Accepted Answer · 2015-02-10 14:53:03Z

0

Yes.. in your case it's almost trivial.

#block1, #block2, (etc) {
    //Your style here
}

Looking at your existing CSS, I'm not sure it's doing what you think it is. #block1.a isn't setting the style on the 'a' elements within the html, it's setting it on the same element, the .a associates it with the class, defined by your class="a" attribute.

Although you're far better off setting a class for your styles, and using that, such as

div.a { //style for `div class="a"` elements
}
div.a a { // style for 'a' elements within those divs
}

edited Feb 10, 2015 at 14:53

answered Feb 10, 2015 at 14:46

Flynn1179

12.1k6 gold badges40 silver badges74 bronze badges

Collectives™ on Stack Overflow

Loop through css possible?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related