Lmst

#cssGotcha `:has()` cannot be nested!

From the spec: `:has()` is not valid within `:has()`.

#CSS #gotcha #code #coding #frontend #webDev #dev #web #webDevelopment #cssSelector

<div class='wrap'>
<div class='item'><div class='a'></div>
<div class='item'><div class='b'></div>
<div class='item'><div class='a'></div>
</div>
<div class='wrap'>
<div class='item'><div class='b'></div>
<div class='item'><div class='a'></div>
<div class='item'><div class='b'></div>
</div>
<style>
/* selects *the only item* inside a wrap containing a */
.item:nth-child(1 of :has(.a)):nth-last-child(1 of :has(.a)) {}
/* doesn't work to select the wrap with only one item containing a */
.wrap:has(.item:nth-child(1 of :has(.a)):nth-last-child(1 of :has(.a))) {}
</style>

#CSS gotcha: if you set a list of gradient stops on an element:
.a { --l: var(--c0), var(--c1) }

... and expect to be able to get *a different gradient* if you just modify --c0 & --c1 on its .b children... I have bad news.😾

You need to set:
.a, .b { --l: var(--c0), var(--c1) }

Live demo on @codepen
https://codepen.io/thebabydino/pen/rNEpbJK?editors=1100

Particularly annoying when that gradient is used on tens of various children. 😿

#cssVariable #gotcha #cssGotcha #code #coding #fronten #web #webDev #dev #webDevelopment

Screenshot of the demo illustrating the problem: --c0 and --c1 are modified on the child divs, but the gradient still uses their values from the parent.

#tinyCSStip (or gotcha) If you want to get the correct result when using smth like
atan2(var(--y), var(--x))
with --y and --x having different units...

then you need to register --x and --y as length values!

Or how I lost > 30min trying to figure out why my angle was 4° off...

#maths #mathematics #cssMaths #trigonometry #gotcha #cssGotcha #code #coding #frontend #webDev #web #dev #webDevelopment #houdini #cssVariables #customProperties #cssFunction

#cssGotcha

Client Info