# 03.25.2022 - CSS/List counter-reset and the start attribute

In CSS, we can create a custom list numbering with `counter-reset`, `counter-increment` and `counter()` functions.

For example:

```css
ol {
 counter-reset: olcounter;

 li {
 counter-increment: olcounter;

 &::before {
 content: counter(olcounter) ". ";
 }
 }
}
```

This approach works fine for most of the continuous list, for example:

```html
<ol>
 <li>first item</li>
 <li>second item</li>
 <li>third item</li>
</ol>
```

But sometimes, you will have a list with a much more complex structure, the HTML structure would not be continuous. For example, when using a markdown generator on the following content:

```markdown
This is a list:

1. First item
 
 Another line here
 
2. Second item
 
 Some more lines
 Ok?
 
3. Third item
```

The generated HTML structure would be broken up into multiple `<ol>` tags. They are technically multiple lists, but each of them has the `start` attribute to specify the start value of the list. So they would look like a continuous list.

```html
<ol start="1">
 <li>
 First item
 Another line here
 </li>
</ol>
<ol start="2">
 <li>
 Second item
 Some more lines
 Ok?
 </li>
</ol>
<ol start="3">
 <li>
 Third item
 </li>
</ol>
```

If we are using the CSS style defined from the beginning of the post, the rendered list would look wrong, all the list items will start with 1 instead of incrementing:

```
1. First item
 
 Another line here
 
1. Second item
 
 Some more lines
 Ok?
 
1. Third item
```

The reason for this behavior is, we are resetting the counter at the beginning of each `<ol>` element.

```css
ol {
 counter-reset: olcounter;
}
```

To fix the problem, we should ignore the counter reset if the `start` attribute is presented, it can be done with the following CSS selector:

```css
ol {
 counter-reset: olcounter;

 &[start] {
 counter-reset: none;
 }
}
```

Please note that this approach does not really respect the value of the `start` attribute. If you want to make `counter-reset` respect the value of the `start` attribute, a possible approach is to use JavaScript to inline the style for each `<ol>` element, like this:

```javascript
const olWithStarts = document.querySelectorAll("ol[start]");

olWithStarts.forEach(ol => {
 const start = ol.getAttribute('start');
 ol.style = 'counter-reset: olcounter ' + start;
});
```

Counter Reset respects start attribute

# 02.23.2022 - CSS/Percentage Padding and Margin

When you specify a percentage value for the CSS padding or margin of an element, this percentage is **based on the width of the containing block**, not the width of the element itself.

For example, in the following code, the `margin-top` of the child element is **150px** (half the parent's width), not **40px** (half of the child element's width).

```css@focus=2,9
#parent {
    width: 300px;
    height: 200px;
}

#child {
    width: 80px;
    height: 40px;
    margin-top: 50%;
}
```

![](_meta/css-percent-padmar.png)

---

We can use this behavior to create elements that have a specific aspect ratio.

For example, to create an element that have the aspect ratio of 16:9, we do not need to calculate the width and height manually, but use `padding-top` instead:

```css
#parent {
    width: 300px;
    height: 200px;
}

#child {
    padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
```

![](_meta/css-percent-aspect-ratio.png)