A guided tour of cutting-edge CSS you can use now

:has()

From MDN: "The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument."

A parent selector

In this example, we are adding a top margin only if the card has an image. This creates a more uniform style for when the card doesn't have an image. We're using an exaggerated margin on the image cards to easily see a difference.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

.card:has(img) {
	h2, h3, h4, h5, h6 {
		margin-top: 2rem;
	}
}

Change parent and child based on parent contents

In this example we'll apply different styling to an image based on whether it has a caption.

Example without caption

Cupcake ipsum dolor sit amet cotton candy powder liquorice shortbread. Croissant macaroon dessert danish caramels donut caramels. Candy canes apple pie gummi bears tootsie roll cookie.

Liquorice bear claw shortbread toffee muffin. Brownie pudding pudding candy cake. Bonbon powder macaroon soufflé lollipop. Bonbon topping chocolate bar chocolate bar tart oat cake marshmallow.

Example with caption

Cupcake ipsum dolor sit amet cotton candy powder liquorice shortbread. Croissant macaroon dessert danish caramels donut caramels. Candy canes apple pie gummi bears tootsie roll cookie.

Liquorice bear claw shortbread toffee muffin. Brownie pudding pudding candy cake. Bonbon powder macaroon soufflé lollipop. Bonbon topping chocolate bar chocolate bar tart oat cake marshmallow.

/* All images */
.text-image {
	border: 1px solid var(--wp--preset--color--spirit-pink);
	padding: 1rem;

	img {
		width: 100%;
		height: auto;
		margin-bottom: 1rem;
	}
}

/* Images with figcaptions, style the container and change the image styling */
.text-image:has(figcaption) {
	border: 1px solid var(--wp--preset--color--spirit-teal);
	background-color: #efefef;

	figure {
		border: 1px solid var(--wp--preset--color--spirit-candle-green);
		padding: 1rem;
		background-color: white;

		img {
			margin-bottom: 0.5rem;
		}

		figcaption {
			font-style: italic;
			font-weight: bold;
		}
	}
}

Show an error message outside your form if something happens inside your form, using only CSS

This example shows how you can toggle content based on form actions without using JavaScript.

Check the "Agree to terms and conditions" box below to see the example error message.

First, let's see our markup:

<div class="form-example">
		<div class="error alert alert-danger">
			<p>Hello! Only show me if the box is checked!</p>
		</div>
		<form class="row mt-5 mb-5 g-3 needs-validation" novalidate>
			...
		</form>
	</div>
</div>

And here is the CSS to make this work:

.form-example:has(input:checked) {
	.error {
		display: block;
	}
}
.form-example:not(:has(input:checked)) {
	.error {
		display: none;
	}
}