Morioh
Login
Tyrique Littel

Tyrique Littel

3 years ago

A practical hack to make CSS nth- selectors variable within Web Components.

Using CSS variables, at least when I’m writing these lines in June 2021, is not supported in media queries or selector, e.g. :nth-child(var(--my-variable)) does not work.

This is a bit unfortunate but, not unsolvable. In some recent development I bypassed this limitation by injecting style elements in the DOM, into my Web Components, in order to animate block of codes in DeckDeckGo.

#programming #web-development #web-components #css

CSS nth- Selectors Variable

itnext.io

CSS nth- Selectors Variable

CSS nth- Selectors Variable. A practical hack to make CSS nth- selectors variable within Web Components. The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

3.50 GEEK