---
title: "@childs Mixin - Child Element Selector"
description: "Use @childs mixin to style child elements in Shilp CSS."
keywords: ["@childs", "child selector", "child elements", "structural selector"]
---

# @childs Mixin

Use `@childs` mixin to style child elements.

Usage:

```css
.any-class {
	/* direct */
	@childs <variant> { ... }

	/* functions */
	@childs <variant>("<arguments>") { ... }
}
```

<Alert variant="info">

This page contains only the **mixins configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	target: "react",

	mixins: {
		childs: {
			variants: {
				first: "& > :first-child",
				last: "& > :last-child",
				// only: "& > :only-child",
				odd: "& > :nth-child(odd)",
				even: "& > :nth-child(even)",
				//
				// "first-of-type": "& > :first-of-type",
				// "last-of-type": "& > :last-of-type",
				// "only-of-type": "& > :only-of-type",
				//
				"not-first": "& > * + *", // not nested, not from other parents
				"not-last": "& > :not(:last-child)",
				//
				any: "& *",
				direct: "& > *",

				/* functions */
				nth: "& > *:nth-child(<1>)",
				// "nth-last": "& > :nth-last-child(<1>)",
				// "nth-of-type": "& > :nth-of-type(<1>)",
				// "nth-last-of-type": "& > :nth-last-of-type(<1>)",
				//
				"match-any": "& <1>",
				"match-direct": "& > <1>",
			},
		},
	},
};

export default shilpConfig;
```

</section>