How can I put a style into a user macro ?

Question

Hello,

I want to make a user macro that write numbered headings in the page where it is placed. I tried to do that but the style is overwritten by the global stylesheet. Do you have an idea to help me ?

#content.page.view {
/* Set "title1" to 0 */
counter-reset: title1;
}

#content.page.view h1 {
/* Set "title2" to 0 */
counter-reset: title2;
}
#content.page.view h1:before {
/* Increment "title1" by 1 */
counter-increment: title1;
content: counter(title1) ". ";
}

#content.page.view h2 {
/* Set "title3" to 0 */
counter-reset: title3;
}
#content.page.view h2:before {
/* Increment "title2" by 1 */
counter-increment: title2;
content: counter(title1) "." counter(title2) ". ";
}

#content.page.view h3 {
/* Set "title4" to 0 */
counter-reset: title4;
}
#content.page.view h3:before {
/* Increment "title3" by 1 */
counter-increment: title3;
content: counter(title1) "." counter(title2) "." counter(title3) ". "; 
}

#content.page.view h4 {
/* Set "title5" to 0 */
counter-reset: title5;
}
#content.page.view h4:before {
/* Increment "title4" by 1 */
counter-increment: title4;
content: counter(title1) "." counter(title2) "." counter(title3) "." counter(title4) ". "; 
}

#content.page.view h5 {
/* Set "title6" to 0 */
counter-reset: title6;
}
#content.page.view h5:before {
/* Increment "title5" by 1 */
counter-increment: title5;
content: counter(title1) "." counter(title2) "." counter(title3) "." counter(title4) "." counter(title5) ". "; 
}

#content.page.view h6:before {
/* Increment "title6" by 1 */
counter-increment: title6;
content: counter(title1) "." counter(title2) "." counter(title3) "." counter(title4) "." counter(title5) "." counter(title6) ". "; 
}

Bill Bailey · Answer

The trick here is to wrap the content of your macro in a classed div tag, then adjust your CSS rules accordningly.

$body

Brant Schroeder · Answer

@Florent R_

You should be able to do it if you use some additional hierarchy in the CSS.

Thanks
Brant