Can the looping feature be applied to CSS?

Question

Can the looping feature be applied to CSS?

I've been reusing the same CSS code multiple times, just changing the names each time. It feels repetitive to call the same CSS repeatedly with different names. I'm considering looping through it instead. Any suggestions?

#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;}

Here's an example from the HTML:

        <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>

html css

Answer 1

Answer №1

If your scenario calls for it, you have the option to utilize the css attribute selector ^=, which functions as a starts with selector:

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

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

Answer 2

If your scenario calls for it, you have the option to utilize the css attribute selector ^=, which functions as a starts with selector:

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

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

Answer 3

Answer №2

To update your existing code, consider making the following modifications:

#section1, #section2, #section3, #section4, #section5 {
    display:block;
    background-color:#FFFFFF;
    color:black;
    padding:1px;
    margin:5px;
}

#section1.a, #section2.a, #section3.a, #section4.a, #section5.a {
    display:none;
    background-color:#FFFFFF;
    color:black;
    padding:1px;
    margin:5px;
}

Alternatively, simplifying with a universal class might be more efficient:

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

Answer 4

To update your existing code, consider making the following modifications:

#section1, #section2, #section3, #section4, #section5 {
    display:block;
    background-color:#FFFFFF;
    color:black;
    padding:1px;
    margin:5px;
}

#section1.a, #section2.a, #section3.a, #section4.a, #section5.a {
    display:none;
    background-color:#FFFFFF;
    color:black;
    padding:1px;
    margin:5px;
}

Alternatively, simplifying with a universal class might be more efficient:

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

Answer 5

Answer №3

Absolutely! In your specific situation, it is quite straightforward.

#block1, #block2, (etc) {
    //Customize your styles here
}

Upon reviewing your current CSS, it appears that it may not be functioning as intended. The usage of #block1.a does not apply styles to 'a' elements within the HTML, but rather to the same element associating it with the class specified by class="a".

It is advisable to assign a class for your styles and utilize that approach, for instance

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

Answer 6

Absolutely! In your specific situation, it is quite straightforward.

#block1, #block2, (etc) {
    //Customize your styles here
}

Upon reviewing your current CSS, it appears that it may not be functioning as intended. The usage of #block1.a does not apply styles to 'a' elements within the HTML, but rather to the same element associating it with the class specified by class="a".

It is advisable to assign a class for your styles and utilize that approach, for instance

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

Can the looping feature be applied to CSS?

Answer №1

Answer №2

Answer №3

Similar questions

The art of bringing a pseudo class to life through animation

The origin of the image is specified within the HTML document

What steps are involved in sending a POST request from a web browser?

Arranging div elements into columns side by side with Flexbox

`The problem of div width error``

Switch between various components using multiple buttons in Next.js

What is the best way to create a flexible Ul-LI menu?

What is the best way to make hyperlinks in impress.js?

checkbox inspired by the design of the iPhone

Assigning event to the body element

Can CSS `content` support the combination of different font styles?

Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

Display immersive full-screen overlays that encompass the entire vertical space without the need for scrolling

Tips for implementing active pagination state that persists even after refreshing the page

Tips for transferring the ID from one element to another using JavaScript

Uncertainties surrounding the use of JSON data versus a JavaScript object

My custom styles no longer seem to be applying after upgrading Angular Material from version 14 to 15. What could be causing this issue

The implementation of pre-wrap styling resulted in a significant increase in the indentation of the initial

Different ways to contrast rows within ag-grid

Struggling with smoothly transitioning an image into view using CSS and JavaScript