-1

I use CSS counters to create some variations of an ordered list <ol>. I accomplish this by using different classes and tweak the styling of each class.

Now I want the counters to respond to screen size, that's smaller numbers on smaller screens. I have done this by using media queries and setting the size for each of the four classes separately. This works perfectly. However, this results in a lot of duplicated code. To minimise code, I've tried to target the four different classes simultaneously by:

ol.class1, ol.class2, ol.class3, ol.class4 {...}

I also tried:

ol > .class1, .class2, .class3, .class4 {...}

However, in each case I lost the responsive behaviour. So obviously, I'm doing it incorrectly. How can I target the different classes of the ordered list <ol> simultaneously in order to style them together?

Hagelslag
  • 85
  • 8

1 Answers1

1

If I understand correctly, it sounds like you're on the right track. I just tested this, and it works perfectly... the text will render as 20px on screens above 600px wide, and below 600px wide the text will render at 12px

HTML

<ol class="class1">
  <li>List item</li>
</ol>

<ol class="class2">
  <li>List item</li>
</ol>

<ol class="class3">
  <li>List item</li>
</ol>

CSS

/* font-size defaults to 20px */
ol.class1, ol.class2, ol.class3 {
  font-size: 20px;
}

/* font-size will be 12px on screens less than or equal to 600px wide */
@media screen and (max-width: 600px) {
  ol.class1, ol.class2, ol.class3 {
    font-size: 12px;
  }
}
Tyler
  • 11
  • 4