Logo

Child selectors

Child selectors met CSS.

Hoe werkt dat dan?

child selectors zijn handig om specifieke elementen te selecteren binnen een container.


<div class="container">
	<div class="row">
		<div>:first-child</div>
		<section data-first>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:last-child</div>
		<section data-last>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:nth-child(2)</div>
		<section data-nth-child-2>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:nth-last-child(3)</div>
		<section data-nth-last-child-3>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:nth-child(odd)</div>
		<section data-nth-child-odd>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:nth-child(even)</div>
		<section data-nth-child-even>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:nth-child(3n)</div>
		<section data-nth-child-3n>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
	<div class="row">
		<div>:nth-child(n+3)</div>
		<section data-nth-child-n-3>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</section>
	</div>
</div>
        
.container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	.row {	
		display: flex;
		gap: 20px;
		div:first-child {
			width: 150px;
	}
}
section {
	display: flex;
	gap: 10px;
}

span {
font-size: 19px;
	&::before {
		display: block;
		content: attr(data-content);
		border-radius: 999px;
		background-color: darkcyan;
		height: 20px;
		width: 20px;
	}
}

[data-first] span:first-child::before {
	content: '🌮';
	background-color: transparent;
}
[data-last] span:last-child::before {
	content: '🌮';
	background-color: transparent;
}
[data-nth-child-2] span:nth-child(2)::before {
	content: '🌮';
	background-color: transparent;
}
[data-nth-last-child-3] span:nth-last-child(3)::before {
	content: '🌮';
	background-color: transparent;
}
[data-nth-child-odd] span:nth-child(odd)::before {
	content: '🌮';
	background-color: transparent;
}
[data-nth-child-even] span:nth-child(even)::before {
	content: '🌮';
	background-color: transparent;
}
[data-nth-child-3n] span:nth-child(3n)::before {
	content: '🌮';
	background-color: transparent;
}
[data-nth-child-n-3] span:nth-child(n+3)::before {
	content: '🌮';
	background-color: transparent;
}