CSS Pseudo Child Selector
:first-child
Selects the first child element of its parent.
Usage
<style>
#car-brands-1 li:first-child {color: red;}
</style>
<ul id="car-brands-1">
<li>Mercedes-Benz</li>
<li>BMW</li>
<li>Volkswagen</li>
<li>Chevrolet</li>
<li>Ford</li>
</ul>Preview
- Mercedes-Benz
- BMW
- Volkswagen
- Chevrolet
- Ford
:last-child
Selects the last child element of its parent.
Usage
<style>
#car-brands-2 li:last-child {color: red;}
</style>
<ul id="car-brands-2">
<li>Mercedes-Benz</li>
<li>BMW</li>
<li>Volkswagen</li>
<li>Chevrolet</li>
<li>Ford</li>
</ul>Preview
- Mercedes-Benz
- BMW
- Volkswagen
- Chevrolet
- Ford
:nth-child(n)
Selects elements that match a specific position in a group of siblings.
Usage
<style>
#car-brands-3 li:nth-child(3) {color: red;}
</style>
<ul id="car-brands-3">
<li>Mercedes-Benz</li>
<li>BMW</li>
<li>Volkswagen</li>
<li>Chevrolet</li>
<li>Ford</li>
</ul>Preview
- Mercedes-Benz
- BMW
- Volkswagen
- Chevrolet
- Ford
:nth-last-child(n)
Selects elements that match a specific position in a group of siblings, counting from the last child.
Usage
<style>
#car-brands-4 li:nth-last-child(2) {color: red;}
</style>
<ul id="car-brands-4">
<li>Mercedes-Benz</li>
<li>BMW</li>
<li>Volkswagen</li>
<li>Chevrolet</li>
<li>Ford</li>
</ul>Preview
- Mercedes-Benz
- BMW
- Volkswagen
- Chevrolet
- Ford
:only-child
Selects elements that are the only child of its parent.
Usage
<style>
.apple-products-list-1 li:only-child {color: red;}
</style>
<ul class="apple-products-list-1">
<li>MacBook Air</li>
<li>MacBook Pro</li>
</ul>
<br>
<ul class="apple-products">
<li>Vision Pro</li>
</ul>
<br>
<ul class="apple-products">Preview
- MacBook Air
- MacBook Pro
- Vision Pro
- iPhone 15 Pro Max
- iPhone 15 Pro
- iPhone 15 Plus
- iPhone 15
:first-of-type
Selects the first element of its type among sibling elements.
Usage
<style>
.apple-products-list-2 li:first-of-type {color: red;}
</style>
<ul class="apple-products-list-2">
<li>MacBook Air</li>
<li>MacBook Pro</li>
</ul>
<br>
<ul class="apple-products-list-2">
<li>Vision Pro</li>
</ul>
<br>
<ul class="apple-products-list-2">Preview
- MacBook Air
- MacBook Pro
- Vision Pro
- iPhone 15 Pro Max
- iPhone 15 Pro
- iPhone 15 Plus
- iPhone 15
:last-of-type
Selects the last element of its type among sibling elements.
Usage
<style>
.apple-products-list-3 li:last-of-type {color: red;}
</style>
<ul class="apple-products-list-3">
<li>MacBook Air</li>
<li>MacBook Pro</li>
</ul>
<br>
<ul class="apple-products-list-3">
<li>Vision Pro</li>
</ul>
<br>
<ul class="apple-products-list-3">Preview
- MacBook Air
- MacBook Pro
- Vision Pro
- iPhone 15 Pro Max
- iPhone 15 Pro
- iPhone 15 Plus
- iPhone 15
:nth-of-type(n)
Selects elements of a specific type that match a specific position among sibling elements.
Usage
<style>
.apple-products-list-4 li:nth-of-type(2) {color: red;}
</style>
<ul class="apple-products-list-4">
<li>MacBook Air</li>
<li>MacBook Pro</li>
</ul>
<br>
<ul class="apple-products-list-4">
<li>Vision Pro</li>
</ul>
<br>
<ul class="apple-products-list-4">Preview
- MacBook Air
- MacBook Pro
- Vision Pro
- iPhone 15 Pro Max
- iPhone 15 Pro
- iPhone 15 Plus
- iPhone 15
:nth-last-of-type(n)
Selects elements of a specific type that match a specific position among sibling elements, counting from the last element.
Usage
<style>
.apple-products-list-5 li:nth-last-of-type(2) {color: red;}
</style>
<ul class="apple-products-list-5">
<li>MacBook Air</li>
<li>MacBook Pro</li>
</ul>
<br>
<ul class="apple-products-list-5">
<li>Vision Pro</li>
</ul>
<br>
<ul class="apple-products-list-5">Preview
- MacBook Air M3
- MacBook Air M2
- MacBook Air M1
- MacBook Pro M3
- MacBook Pro M2
- MacBook Pro M1
- Vision Pro
- iPhone 15 Pro Max
- iPhone 15 Pro
- iPhone 15 Plus
- iPhone 15
Browsers that Support CSS Child Pseudo
