Back in May, I decided to write down my tips and tricks of the month. My hope is that people find them useful (or share even newer tricks for me), but at the very least, writing them down organizes my thoughts (and forces me to write a blog post more than once a year). So here’s what I got for June:

CSS

span:nth-child isn’t the nth span (6/22/20)

Shame on me again for not reading docs first.

Consider:

<div>
    <span id='1'>
    <span id='2'>
    <p>Text </p>
    <span id='3'>
    <span id='4'>
</div>

If I have a CSS rule that specifies `span:nth-child(2n)` (or every 2nd one), it won’t give me the span with id 2 and 4, it will give me the span with 2 and 3! This is because nth-child refers to the sibling group, which is all the elements. From there it finds every second sibling, and then if that sibling is a span, does it apply the styling.