Ancestor class based styling

[benjaminpreiss]

I want to style an element based on the presence of a class in one of an elements ancestor. The class is called video-start and is added to the parent when I click on a button.

Then, on a descendant element of that child, I want to add the style -translate-x-full when the ancestor has the class video-start present. I am using [.video-start_&]:-translate-x-full for that. But somehow, no styles are added.

See the screenshots for reference. Anybody know why? Is this a safe listing problem? I don't have safe listing problems with the other classes

Parent element inspection:

Child element inspection:

Svelte component:

<script lang="ts">
	import type { SvelteHTMLElements } from 'svelte/elements';

	let {
		side,
		transparent,
		children,
		...props
	}: SvelteHTMLElements['div'] & {
		side: 'left' | 'right';
		transparent: boolean;
	} = $props();
	const sideClass =
		side === 'left'
			? 'left-0 right-1/2 [.video-start_&]:-translate-x-full'
			: 'left-1/2 right-0 [.video-start_&]:translate-x-full';
	const transparentClass = transparent
		? 'bg-none aspect1:top-0'
		: 'bg-[#efeae3] opacity-90 aspect1:bottom-0 aspect1:top-[40%] [.mouse-enter_&]:opacity-80';
	const transparentSideClass = transparent
		? side === 'left'
			? 'aspect1:bottom-[50%]'
			: 'aspect1:bottom-[60%]'
		: '';
	const type = `m-half-cover-${side}${transparent ? '-transparent' : ''}`;
</script>

<div
	{...props}
	class="{type} transition duration-[200ms] ease-in-out {sideClass} {transparentSideClass} {transparentClass} absolute bottom-0 top-0 flex flex-col items-center justify-center aspect1:inset-x-0 {props.class}"
>
	{#if children}
		{@render children()}
	{/if}
</div>

[wongjn]

Seems to work in this Tailwind Play which would indicate something particular to your project that is causing the unexpected behavior.

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.
• The class name would resolve to a Tailwind class that Tailwind would generate a rule for.

Otherwise, consider providing a project that reproduces the unexpected behavior.

[benjaminpreiss]

Yes, that was also what I strangely found when trying to reproduce in a tailwind play.

Here is a project that reproduces this behaviour: https://github.com/benjaminpreiss/susanne_preiss_website/tree/59-modernize-page

1. Git clone
2. git checkout 59-modernize-page
3. pnpm i (node 20)
4. pnpm dev
5. Incognito chrome window, go to http://localhost:5173/workshops
6. Click on play button, then inspect element in chrome inspector with class video-start and the child with class [.video-start_&]:-translate-x-full

[wongjn]

I get

500
Internal Error

[benjaminpreiss]

https://replit.com/@benjaminpreiss/susannepreisswebsite

I am getting a 500 error as well, but only initially and after a small wait you can see the site.
Remember, that you need to navigate to /workshops

[wongjn]

Ah yes, sorry. From what I can see, it should work, but I have no idea why it isn't! Even copy-pasting the same rule that already exists into devtools inline style seems to work:

.video-start .\[\.video-start_\&\]\:-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[benjaminpreiss]

Very strange, no? What should I do now?