Multiple CSS counters in one code


Hi three every one this is the CSS CODE:

body {font-family: Montserrat,Helvetica,Arial,Verdana,sans-serif;counter-reset: section; counter-reset: section2;}

.csscounter::before {
  counter-increment: section;
  content: " " counter(section) " ";

.csscounter2::before {
  counter-increment: section2;
  content: " " counter(section2) " ";

But the above one is failing.

Desired result:
Semester 1
Semester 2
Semester 3

Subject 1
Subject 2
Subject 3

Subject 10

Here is the Live URL


I’m not sure what you wanted but the counter-reset needs a space separated list.


body{counter-reset:section section2 ;}

Just adding counter-reset twice like you did is the same as sayingcolor:red; color:green :slight_smile:

If you want the subjects to start at 1 for each semester then reset them again like this:

.class1 {counter-reset:section}

Note it is invalid to have an h3 inside a label as a label is an inline element.


Ok sir.

Then how should we handle this? Remove H3 and give font size etc with CSS?


Yes just style the label as you wish. Css doesn’t care what an element looks like.

A label connects to a form control. It is not a heading as such.


Numbered headings should never ever, ever be used to to set font sizes.
That task is presentational and should, therefore, be the job of CSS.

Further reading :-

Improper use of numbered headings



Hi there,

I was trying to make the website responsive here.

.semester I was changing this to block element from flex.

All are the child of .semester class but add subject is not falling below - Not aligning in one column.

what could be the remedial action?


Your add subject button is floated right so remove the float when you change the way the element displays in your media query. or ig you still want it floated rightr you will need to contain the floated child within .semester.

e.g. In your media query add overflow:hidden to .semester which will contain the floated children assuming you don’t need visible overflow.


Hi there @PaulOB
Most of the things worked the way you suggested:

Is there a way to bring CGPA = part above the Add more semesters.


If you add one div around both the add more semesters button and the following flex div you can use flex on the new parent div and then use the order property on the direct children to change where each one displays.

Have a play around with it as there will be finer tuning required :slight_smile:


Hi there actually I knew this solution, but a JQuery code is written to populate the additional semesters that is based on parent child relationships and adding one more div will break that.


You would be better off changing that so that you add a parent and two children each time otherwise you will have little control.

It would be possible to hack the layout into submission but you would need to keep track of the order property and would be awkward.

This would work for the page as is now.

.sembutton {width:250px;order:3;}
.sembutton + div{justify-content:flex-start!important;}

However the real solution is to use a parent around the button and div as mentioned earlier.


Thanks sir, and how to align this part in the horizontal middle:

I was expecting that setting margin:auto to .semester class can make a difference, but that actually doesn’t works.


You could use flex again.

Something like:

/* Handling responsive CSS */
@media only screen and (max-width: 1100px) {
	.semester {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	.class2 button {
	    float: none;

Or maybe instead of display:block try display:table and margin:auto;

/* Handling responsive CSS */
@media only screen and (max-width: 1100px) {
	.semester {
	    display: table;
	.class2 button {
	    float: none;

Loads of options:)



On width 550px I also tried this one:

@media only screen and (max-width: 550px) {
	.htmljs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

are child to the above class ideally this should work. Isn’t it?


I am unable to overcome various challengs such as this one:


and this one:


I hve fixed most of the above stated things, but could not align this in horizontal middle:


Do you have an updated test site on-line?


Try this:


Note that you are overusing the !important property and every time something changes you are using !important again. If all the values have !important then it makes no sense and no benefit! As shown by the fact that in the code above I have to use !important to over-ride your other !importants :slight_smile:

In most sites you will never need to use !important simply to overcome specificity. Some times with third party apps you will need !important but otherwise use it very rarely.

In most of the sites I’ve coded over the years there are no !important rules at all.

You should instead address the specificity of the code involved and that can always be resolved without using !important unless the styles themselves are in the html tag in a style attribute (and we don’t do that do we :)).


Yes Here.


Interestingly, that looks like a screen shot. Not a live site.

Interestingly, I don’t see in a real browser what you see in WordPress` “page view” (sic. if that’s what it is. I’m not a WordPresser but I can usually troubleshoot HTML and CSS code.)

We do request working pages or URLs to test sites so we can see the same thing that you see and work with your code to fix whatever troubles may exist. Can you help us help you? Isolated snippits just don’t work well.

Thank you.