Documentation
Docs

Selectors

Selectors are a novel method of applying Tailwind classes to deeply nested HTML markup using ska-blocks UI.

Since ska-blocks provides a UI for managing Tailwind classes, it is possible to take advantage of the Tailwind’s capability of applying rules to nested elements.

With Tailwind you can style direct child elements by using the [&>*] variant, as of Tailwind v3.4 (which ska-blocks is using), the even shorter * variant can be used. But you can also style the children of the child elements by using [&>*>*] variant, but also [&>*]:[&>*] variant or *:* for short. Or even children of the children of the children, or, you get the gist. While this is possible, it’s not particularly manageable by just writing out classes for an HTML element. For every “rule” you would have to prepend the variant or “selector” and it would get quite hard to read.

With ska-blocks styling nested elements becomes easier by adding a “selector”. To add a selector, use the “Add classes or utility…” field, but finish the input with the : character and hit enter or use Add selector from the suggestions:

This adds a “selector” below the input field:

When you click on it, you will navigate to this selector, where you can add classes to it normally:

How ever any classes that you add will be prefixed by the selector. If you were to add m-0 it would appear normally in the UI as m-0:

but it would produce the class name [&>.parent>.child]:m-0 which is what you see, slightly grayed out, when you navigate back to the root level:

Tip: you can click on the Eye icon to disable the visibility of child selector classes.

And of course you can add root level classes as well, such as m-4:

which would leave the block with the classes m-4 [&>.parent>.child]:m-0, both applied to the root level HTML element, but one is styling a child element.

This is useful in the WordPress Block Editor because blocks have controls only for the parent HTML element, but they usually produce markup that has many children at various levels. With selectors you can easily reach in and style anything granularly, while if you were using the default WordPress styling controls they generally are limited and apply only to the root element or some specific selectors.

Selectors don’t necessarily have to be CSS-selector-like variants, they can be any Tailwind variants, such as hover, lg etc, should you wish to organize your classes in such a manner. But usually, you should create a selector only when it will have many different classes or a nested selector (see below). For one-off resetting margin on all children for example *:m-0 you can just add this class normally and avoid complicating things and creating additional navigation with selectors.

Nested selectors

Once you’ve added a selector and navigated to it:

you can add Tailwind classes. But you can also add more selectors:

Once added, you can navigate to it and give it a rule as well:

Now its’ parent shows the rule, slightly grayed out once again:

and the root item shows both of the classes (provided you have it enabled from the button with the Eye icon):

resulting in the block having the class names:

m-4 [&>.parent>.child]:m-0 [&>.child-of-child]:[&>.parent>.child]:m-2.5
which produces this CSS.
.m-4 {
	margin: var(--ska-spacing-4)
}

.\[\&\>\.parent\>\.child\]\:m-0>.parent>.child {
	margin: var(--ska-spacing-0)
}

.\[\&\>\.child-of-child\]\:\[\&\>\.parent\>\.child\]\:m-2\.5>.parent>.child>.child-of-child {
	margin: var(--ska-spacing-2\.5)
}

This class name already looks quite long and complicated if you had to manage it directly in the HTML, simply adding p-2 to the .child-of-child would more than double the length of the classes, but with the UI you can nest infinitely deep with relative ease.

For example, when using ska-theme the WooCommerce Single product page styles are essentially one Preset with many selectors. A preset that you can edit in the theme options to have full control over the appearance of the single product page, without needing to override any CSS, but instead change, add and remove your own rules as you see fit and leave no unused CSS behind. The preset itself is “static”, which means its’ class name will simply be ska-preset-${presetId} but it will be backed with the full CSS of the preset. What would the Tailwind class name for such a preset look like?

Show class names
[--variations-gap:theme(spacing[2])] flex [&>.product-content]:flex [&>.images]:[&>.product-content]:flex [&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:grid [&>a]:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:block [&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:grid after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:block [&>.summary]:[&>.product-content]:flex [&_.ska-product-title-wrapper]:[&>.product-content]:flex [&_ins]:[&_.price]:[&>.product-content]:inline-block [&_del]:[&_.price]:[&>.product-content]:inline-block [&_.cart]:[&>.product-content]:flex [&_.quantity]:[&_.cart]:[&>.product-content]:flex has-[input.qty[type=hidden]]:[&_.quantity]:[&_.cart]:[&>.product-content]:hidden [&_tbody]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex [&_tr]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:grid [&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex [&>.single\_variation]:[&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex *:empty:[&>.single\_variation]:[&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:hidden [&_.wc-grouped-product-add-to-cart-checkbox]:[&_.group\_table]:[&_.cart]:[&>.product-content]:inline-block [&_.woocommerce-variation-add-to-cart]:[&_.cart]:[&>.product-content]:flex [&_.wc-no-matching-variations]:[&_.cart]:[&>.product-content]:hidden [&_.product\_meta]:[&>.product-content]:flex [&_.wc-tabs-wrapper]:flex [&>section]:[&_.wc-tabs-wrapper]:flex [&>button]:[&>section]:[&_.wc-tabs-wrapper]:flex [&>h2:first-child]:[&>.panel]:[&>section]:[&_.wc-tabs-wrapper]:hidden [&_h2.woocommerce-Reviews-title]:[&>.panel]:[&>section]:[&_.wc-tabs-wrapper]:hidden [&_.button]:[&_.cart]:[&>.product-content]:float-left [&>img]:[&>a]:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:object-cover [&>img]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:object-cover [&>.panel]:[&>section]:[&_.wc-tabs-wrapper]:overflow-x-auto [&>.product-content]:relative after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:absolute [&_tbody]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:relative [&_.reset\_variations]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:absolute after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:inset-0 [&_.reset\_variations]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:bottom-0 [&_.reset\_variations]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:left-0 [&_.reset\_variations]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:invisible flex-col [&>.product-content]:flex-col sm:[&>.product-content]:flex-row [&>.images]:[&>.product-content]:flex-col [&>.summary]:[&>.product-content]:flex-col [&_.ska-product-title-wrapper]:[&>.product-content]:flex-col md:[&_.ska-product-title-wrapper]:[&>.product-content]:flex-row [&_.cart]:[&>.product-content]:flex-row [&.variations\_form]:[&_.cart]:[&>.product-content]:flex-col [&_tbody]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex-col [&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex-col [&>.single\_variation]:[&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex-col [&.grouped\_form]:[&_.cart]:[&>.product-content]:flex-col [&_.woocommerce-variation-add-to-cart]:[&_.cart]:[&>.product-content]:flex-row [&_.product\_meta]:[&>.product-content]:flex-col [&_.wc-tabs-wrapper]:flex-col [&>section]:[&_.wc-tabs-wrapper]:flex-col [&_tbody]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:flex-wrap [&_.product\_meta]:[&>.product-content]:order-10 [&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:grid-cols-4 [&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:grid-cols-4 first:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:col-span-full gap-12 [&>.product-content]:gap-6 [&>.images]:[&>.product-content]:gap-2 [&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:gap-2 [&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:gap-2 [&>.summary]:[&>.product-content]:gap-4 [&_.ska-product-title-wrapper]:[&>.product-content]:gap-4 [&_.cart]:[&>.product-content]:gap-2 [&.variations\_form]:[&_.cart]:[&>.product-content]:gap-4 [&_tbody]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:gap-[--variations-gap] [&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:gap-2 [&>.single\_variation]:[&>.single\_variation\_wrap]:[&.variations\_form]:[&_.cart]:[&>.product-content]:gap-1 [&_.woocommerce-variation-add-to-cart]:[&_.cart]:[&>.product-content]:gap-2 [&_.ska-product-title-wrapper]:[&>.product-content]:justify-between [&_.cart]:[&>.product-content]:justify-start [&_tr]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:justify-start [&_.woocommerce-variation-add-to-cart]:[&_.cart]:[&>.product-content]:justify-start [&>button]:[&>section]:[&_.wc-tabs-wrapper]:justify-between [&>.product-content]:items-start [&_.ska-product-title-wrapper]:[&>.product-content]:items-start [&_.cart]:[&>.product-content]:items-stretch [&_tr]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:items-center [&.grouped\_form]:[&_.cart]:[&>.product-content]:items-start [&_.woocommerce-variation-add-to-cart]:[&_.cart]:[&>.product-content]:items-stretch [&>section]:[&_.wc-tabs-wrapper]:items-stretch [&>button]:[&>section]:[&_.wc-tabs-wrapper]:items-center [&_tbody]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:pb-[calc(var(--variations-gap)_*_2)] [&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:pt-1 [&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:pb-1 [&_.woocommerce-grouped-product-list-item\_\_label]:[&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:px-4 [&>button]:[&>section]:[&_.wc-tabs-wrapper]:p-4 [&>.panel]:[&>section]:[&_.wc-tabs-wrapper]:p-4 [&>.panel]:[&>section]:[&_.wc-tabs-wrapper]:pt-0 [&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:m-0 [&_.product\_title]:[&_.ska-product-title-wrapper]:[&>.product-content]:m-0 [&_.price]:[&>.product-content]:m-0 [&_.stock]:[&>.product-content]:m-0 [&_.wc-grouped-product-add-to-cart-checkbox]:[&_.group\_table]:[&_.cart]:[&>.product-content]:mx-auto [&_.wc-grouped-product-add-to-cart-checkbox]:[&_.group\_table]:[&_.cart]:[&>.product-content]:my-0 [&_.wc-tabs-wrapper]:my-4 [&>h3]:[&>button]:[&>section]:[&_.wc-tabs-wrapper]:m-0 [&_.ska-preset-prose]:m-0 first:*:[&_.ska-preset-prose]:mt-0 last:*:[&_.ska-preset-prose]:mb-0 first:[&_p]:[&_.ska-preset-prose]:mt-0 last:[&_p]:[&_.ska-preset-prose]:mb-0 [&>.images]:[&>.product-content]:w-full sm:[&>.images]:[&>.product-content]:w-2/5 md:[&>.images]:[&>.product-content]:w-1/2 [&>a]:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:w-full [&>img]:[&>a]:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:w-full [&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:w-24 after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:w-full [&>img]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:w-full [&>.summary]:[&>.product-content]:w-full sm:[&>.summary]:[&>.product-content]:w-3/5 md:[&>.summary]:[&>.product-content]:w-1/2 first:[&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:w-16 [&_.wc-grouped-product-add-to-cart-checkbox]:[&_.group\_table]:[&_.cart]:[&>.product-content]:w-auto [&>.images]:[&>.product-content]:min-w-0 [&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:min-w-24 [&>.summary]:[&>.product-content]:min-w-0 [&_.ska-preset-prose]:max-w-none [&>a]:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:h-auto [&>img]:[&>a]:*:[&>.woocommerce-product-gallery\_\_wrapper]:[&>.images]:[&>.product-content]:h-full [&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:h-24 after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:h-full [&>img]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:h-full [&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:max-h-[720px] [&_.woocommerce-review-link]:[&_.woocommerce-product-rating]:[&>.product-content]:text-sm [&_.price]:[&>.product-content]:text-xl [&_.stock]:[&>.product-content]:text-sm [&_.reset\_variations]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:text-sm/3 [&_.woocommerce-variation-description]:[&_.cart]:[&>.product-content]:text-sm [&_.product\_meta]:[&>.product-content]:text-sm [&>h3]:[&>button]:[&>section]:[&_.wc-tabs-wrapper]:text-base [&_.ska-preset-prose]:text-base [&_ins]:[&_.price]:[&>.product-content]:font-bold [&>.label]:[&_tr]:[&>.variations]:[&.variations\_form]:[&_.cart]:[&>.product-content]:text-left first:[&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:text-center [&.in-stock]:[&_.stock]:[&>.product-content]:text-[--wc-green] [&.out-of-stock]:[&_.stock]:[&>.product-content]:text-[--wc-red] [&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:align-middle [&_.button]:[&_.cart]:[&>.product-content]:align-middle after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:content-[''] [&_ins]:[&_.price]:[&>.product-content]:bg-inherit [&_.wc-tabs-wrapper]:bg-white [&_.wc-tabs-wrapper]:rounded [&_td]:[&_.group\_table]:[&_.cart]:[&>.product-content]:border-0 [&_.wc-tabs-wrapper]:border [&>:not([hidden])~:not([hidden])]:[&_.wc-tabs-wrapper]:border-t after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:ring-2 after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:ring-inset after:[&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:ring-primary/50 [&_.wc-tabs-wrapper]:shadow-sm [&>img]:*:[&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:opacity-75 hover:[&>img]:*:[&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:opacity-[1] [&.flex-active]:[&>img]:*:[&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:opacity-[1] [&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:opacity-80 hover:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:opacity-90 [&.swiper-slide-thumb-active]:[&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:opacity-100 [&_del]:[&_.price]:[&>.product-content]:opacity-50 [&_.wc-grouped-product-add-to-cart-checkbox]:[&_.group\_table]:[&_.cart]:[&>.product-content]:scale-150 [&>img]:*:[&>.flex-control-thumbs]:[&>.images]:[&>.product-content]:cursor-pointer [&_.swiper-slide]:[&_.swiper.ska-thumbs]:[&>.images]:[&>.product-content]:cursor-pointer

Unwieldy. The class name is about as long as the CSS it compiles into. If you see this in some projects’ source code, there is no managing that. But with the ska-blocks UI it is quite simple:

Just click on a selector and there are another couple of classes and more selectors:

All the front end sees is the class name ska-preset-${presetId} and the CSS it produces (with the ska-preset-selector class name replaced with the preset class name):

Show CSS
.ska-preset-selector {
	display: flex;
	flex-direction: column;
	gap: var(--ska-spacing-12);
	--variations-gap: var(--ska-spacing-2)
}

.ska-preset-selector>.product-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ska-spacing-6)
}

@media (min-width: 640px) {
	.ska-preset-selector>.product-content {
		flex-direction: row
	}
}

.ska-preset-selector>.product-content>.images {
	display: flex;
	width: 100%;
	min-width: 0px;
	flex-direction: column;
	gap: var(--ska-spacing-2)
}

@media (min-width: 640px) {
	.ska-preset-selector>.product-content>.images {
		width: 40%
	}
}

@media (min-width: 768px) {
	.ska-preset-selector>.product-content>.images {
		width: 50%
	}
}

.ska-preset-selector>.product-content>.images>.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ska-spacing-2)
}

.ska-preset-selector>.product-content>.summary {
	display: flex;
	width: 100%;
	min-width: 0px;
	flex-direction: column;
	gap: var(--ska-spacing-4)
}

@media (min-width: 640px) {
	.ska-preset-selector>.product-content>.summary {
		width: 60%
	}
}

@media (min-width: 768px) {
	.ska-preset-selector>.product-content>.summary {
		width: 50%
	}
}

.ska-preset-selector>.product-content>.images>.woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ska-spacing-2)
}

.ska-preset-selector>.product-content>.images>.woocommerce-product-gallery__wrapper>*:first-child {
	grid-column: 1/-1
}

.ska-preset-selector>.product-content>.images>.woocommerce-product-gallery__wrapper>*>a {
	display: block;
	height: auto;
	width: 100%
}

.ska-preset-selector>.product-content>.images>.flex-control-thumbs>*>img {
	cursor: pointer;
	opacity: 0.75
}

.ska-preset-selector>.product-content>.images>.flex-control-thumbs>*>img:hover {
	opacity: 1
}

.ska-preset-selector>.product-content>.images>.flex-control-thumbs>*>img.flex-active {
	opacity: 1
}

.ska-preset-selector>.product-content>.images>.woocommerce-product-gallery__wrapper>*>a>img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.ska-preset-selector>.product-content .cart {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--ska-spacing-2)
}

.ska-preset-selector>.product-content .cart.grouped_form {
	flex-direction: column;
	align-items: flex-start
}

.ska-preset-selector>.product-content .cart.variations_form {
	flex-direction: column;
	gap: var(--ska-spacing-4)
}

.ska-preset-selector>.product-content .cart.variations_form>.single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--ska-spacing-2)
}

.ska-preset-selector>.product-content .cart.variations_form>.single_variation_wrap>.single_variation {
	display: flex;
	flex-direction: column;
	gap: var(--ska-spacing-1)
}

.ska-preset-selector>.product-content .cart.variations_form>.single_variation_wrap>.single_variation:empty>* {
	display: none
}

.ska-preset-selector>.product-content .cart .button {
	float: left;
	vertical-align: middle
}

.ska-preset-selector>.product-content .price {
	margin: var(--ska-spacing-0);
	font-size: var(--ska-font-size-xl);
	line-height: var(--ska-font-size-xl-lh)
}

.ska-preset-selector>.product-content .product_meta {
	order: 10;
	display: flex;
	flex-direction: column;
	font-size: var(--ska-font-size-sm);
	line-height: var(--ska-font-size-sm-lh)
}

.ska-preset-selector>.product-content .cart .quantity {
	display: flex
}

.ska-preset-selector>.product-content .cart .quantity:has(input.qty[type=hidden]) {
	display: none
}

.ska-preset-selector>.product-content .cart.variations_form>.variations .reset_variations {
	visibility: hidden;
	position: absolute;
	bottom: var(--ska-spacing-0);
	left: var(--ska-spacing-0);
	font-size: var(--ska-font-size-sm);
	line-height: .75rem
}

.ska-preset-selector .ska-preset-prose {
	margin: var(--ska-spacing-0);
	max-width: none;
	font-size: var(--ska-font-size-base);
	line-height: var(--ska-font-size-base-lh)
}

.ska-preset-selector .ska-preset-prose>*:first-child {
	margin-top: var(--ska-spacing-0)
}

.ska-preset-selector .ska-preset-prose>*:last-child {
	margin-bottom: var(--ska-spacing-0)
}

.ska-preset-selector>.product-content .ska-product-title-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ska-spacing-4)
}

@media (min-width: 768px) {
	.ska-preset-selector>.product-content .ska-product-title-wrapper {
		flex-direction: row
	}
}

.ska-preset-selector>.product-content .ska-product-title-wrapper .product_title {
	margin: var(--ska-spacing-0)
}

.ska-preset-selector>.product-content .stock {
	margin: var(--ska-spacing-0);
	font-size: var(--ska-font-size-sm);
	line-height: var(--ska-font-size-sm-lh)
}

.ska-preset-selector>.product-content .stock.in-stock {
	color: var(--wc-green)
}

.ska-preset-selector>.product-content .stock.out-of-stock {
	color: var(--wc-red)
}

.ska-preset-selector>.product-content>.images .swiper.ska-thumbs {
	margin: var(--ska-spacing-0);
	max-height: 720px;
	min-width: var(--ska-spacing-24)
}

.ska-preset-selector>.product-content>.images .swiper.ska-thumbs .swiper-slide {
	height: var(--ska-spacing-24);
	width: var(--ska-spacing-24);
	cursor: pointer;
	opacity: 0.8
}

.ska-preset-selector>.product-content>.images .swiper.ska-thumbs .swiper-slide:hover {
	opacity: 0.9
}

.ska-preset-selector>.product-content>.images .swiper.ska-thumbs .swiper-slide.swiper-slide-thumb-active {
	opacity: 1
}

.ska-preset-selector>.product-content>.images .swiper.ska-thumbs .swiper-slide.swiper-slide-thumb-active::after {
	position: absolute;
	inset: var(--ska-spacing-0);
	display: block;
	height: 100%;
	width: 100%;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-inset: inset;
	--tw-ring-color: rgba(var(--ska-rgb-primary), 0.5);
	--tw-content: '';
	content: var(--tw-content)
}

.ska-preset-selector>.product-content>.images .swiper.ska-thumbs .swiper-slide>img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.ska-preset-selector>.product-content .cart .group_table .wc-grouped-product-add-to-cart-checkbox {
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--ska-spacing-0);
	margin-bottom: var(--ska-spacing-0);
	display: inline-block;
	width: auto;
	--tw-scale-x: 1.5;
	--tw-scale-y: 1.5;
	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))
}

.ska-preset-selector>.product-content .cart .wc-no-matching-variations {
	display: none
}

.ska-preset-selector .wc-tabs-wrapper {
	margin-top: var(--ska-spacing-4);
	margin-bottom: var(--ska-spacing-4);
	display: flex;
	flex-direction: column;
	border-radius: var(--ska-border-radius);
	border-width: 1px;
	--tw-bg-opacity: 1;
	background-color: rgba(var(--ska-rgb-white), 1);
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0/0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ska-preset-selector .wc-tabs-wrapper>:not([hidden])~:not([hidden]) {
	border-top-width: 1px
}

.ska-preset-selector .wc-tabs-wrapper>section {
	display: flex;
	flex-direction: column;
	align-items: stretch
}

.ska-preset-selector .wc-tabs-wrapper>section>.panel {
	overflow-x: auto;
	padding: var(--ska-spacing-4);
	padding-top: var(--ska-spacing-0)
}

.ska-preset-selector .wc-tabs-wrapper>section>button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ska-spacing-4)
}

.ska-preset-selector .wc-tabs-wrapper>section>.panel>h2:first-child {
	display: none
}

.ska-preset-selector .wc-tabs-wrapper>section>button>h3 {
	margin: var(--ska-spacing-0);
	font-size: var(--ska-font-size-base);
	line-height: var(--ska-font-size-base-lh)
}

.ska-preset-selector>.product-content .woocommerce-product-rating .woocommerce-review-link {
	font-size: var(--ska-font-size-sm);
	line-height: var(--ska-font-size-sm-lh)
}

.ska-preset-selector>.product-content .cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--ska-spacing-2)
}

.ska-preset-selector>.product-content .cart .woocommerce-variation-description {
	font-size: var(--ska-font-size-sm);
	line-height: var(--ska-font-size-sm-lh)
}

.ska-preset-selector>.product-content .price del {
	display: inline-block;
	opacity: 0.5
}

.ska-preset-selector .wc-tabs-wrapper>section>.panel h2.woocommerce-Reviews-title {
	display: none
}

.ska-preset-selector>.product-content .price ins {
	display: inline-block;
	background-color: inherit;
	font-weight: var(--ska-font-weight-bold)
}

.ska-preset-selector .ska-preset-prose p:first-child {
	margin-top: var(--ska-spacing-0)
}

.ska-preset-selector .ska-preset-prose p:last-child {
	margin-bottom: var(--ska-spacing-0)
}

.ska-preset-selector>.product-content .cart.variations_form>.variations tbody {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--variations-gap);
	padding-bottom: calc(var(--variations-gap) * 2)
}

.ska-preset-selector>.product-content .cart .group_table td {
	border-width: 0px;
	padding-top: var(--ska-spacing-1);
	padding-bottom: var(--ska-spacing-1);
	vertical-align: middle
}

.ska-preset-selector>.product-content .cart .group_table td:first-child {
	width: var(--ska-spacing-16);
	text-align: center
}

.ska-preset-selector>.product-content .cart .group_table td .woocommerce-grouped-product-list-item__label {
	padding-left: var(--ska-spacing-4);
	padding-right: var(--ska-spacing-4)
}

.ska-preset-selector>.product-content .cart.variations_form>.variations tr {
	display: grid;
	align-items: center;
	justify-content: flex-start
}

.ska-preset-selector>.product-content .cart.variations_form>.variations tr>.label {
	text-align: left
}

A selector this big looks a lot like a whole CSS file, except you’re not defining CSS rules, you’re adding Tailwind classes. With the button top left of selectors it’s possible to see its’ hierarchy for quick navigation:

While the selectors are capable of scaling this large, it’s not the norm. The ska-theme Single product page preset is by far the biggest and most complex group of selectors for the whole project, and it is providing styles for the whole “legacy” WC single product page template, while if you were to use a block-based Single product page with WordPress Full Site Editing you wouldn’t have to express an entire stylesheet in the form of Tailwind classes, but you could style the blocks individually making it much simpler (how ever WooCommerce blocks are still new and ever-changing which is why ska-theme ships with the reliable legacy approach by default).

In summary, selectors are a useful tool and can scale quite far. It’s up to you where you want to employ this method as opposed to adding individual classes to individual blocks, as well as writing custom Tailwind CSS, or even custom vanilla CSS.

Move classes to parent

If you have a block that has many repeating children, such as a list and list items, you can move the classes from a list item to the parent list:

so that they apply for all items in the list and you don’t have to specify the classes for each list item individually and update each list item every time you want to change the classes (one of the major cons of Tailwind CSS).

With the Move classes to parent feature you’ll be prompted for a selector:

For direct children * is a sufficient selector, but you may also use something like [&>li].
Once moved, the parent will have the chosen selector with the class names that the list item had:

and editing the selector will apply to all current and future list items.