Today I Learned - Rocky Kev

TIL using math to pick CSS child elements

POSTED ON:

TAGS: css

These are some sweet CSS psuedoclass tricks.

/* Select All <li> elements but The First Three */
li:nth-child(n+4) {
      color: yellow;
}

/* Select only the first 3 <li> elemets */
li:nth-child(-n+3) {
    color: green;
}

/* Styles are elements that are not a <p> */
.my-class:not(p) {
    display: none;
}

REFERENCE:
https://javascript.plainenglish.io/11-frontend-tricks-that-most-frontend-developers-dont-know-about-68dc48199ed6

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')