Hi coder! Welcome to this quick solution. Today, we're diving into a common question: Why don't nth-of-type and nth-child work on nested elements?
Many developers wonder if changing styles using nth-of-type(odd) affects all elements, even if one element is inside another. Let's take a look at the issue and understand it before we discuss how to solve it.
Problem
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.c-box {
width: 250px;
height: 250px;
margin: 10px;
float: left;
border: solid;
}
.c-box:nth-of-type(odd) {
width: 250px;
height: 250px;
margin: 0px;
border: solid;
background: steelblue;
}
</style>
</head>
<body>
<div class="p-box">
<div class="c-box"> Box 1</div>
</div>
<div class="p-box">
<div class="c-box">Box 2</div>
</div>
<div class="p-box">
<div class="c-box">Box 3</div>
</div>
<div class="p-box">
<div class="c-box">Box 4</div>
</div>
</body>
</html>
The issue stems from how the CSS selector nth-of-type works when elements are inside <div> tags. It doesn't apply styles as expected in this setup. However, when elements are not enclosed in <div> tags, nth-of-type behaves correctly.
Solution
In the above code, the problem occurs because the CSS selector .c-box:nth-of-type(odd) looks for odd occurrences of .c-box elements within each .p-box container. However, in this code, each .c-box element is the first child within its respective .p-box container. So, the nth-of-type(odd) selector can't find any odd occurrences within each container, causing it not to work as intended.
To resolve this issue, you need to adjust it from targeting odd occurrences of .c-box directly to targeting odd occurrences of .c-box that are inside div elements. So, change .c-box:nth-of-type(odd) to div:nth-of-type(odd) .c-box. This way, you're specifically selecting .c-box elements that appear in odd positions within div containers.
<head>
<style>
.c-box {
width: 250px;
height: 250px;
margin: 10px;
float: left;
border: solid;
}
div:nth-of-type(odd) .c-box {
width: 250px;
height: 250px;
margin: 0px;
border: 1px solid black;
background: steelblue;
}
</style>
</head>
<body>
<div class="p-box-1">
<div class="c-box"> Box 1</div>
</div>
<div class="p-box-2">
<div class="c-box">Box 2</div>
</div>
<div class="p-box-3">
<div class="c-box">Box 3</div>
</div>
<div class="p-box-4">
<div class="c-box">Box 4</div>
</div>
</body>
If you're using the same class name for all the elements (like .p-box in this case), then it's better to use :nth-child(). However, :nth-of-type() is similar to :nth-child(). but to avoid confusion, it's better to use :nth-child() instead.
<head>
<style>
.c-box {
width: 250px;
height: 250px;
margin: 10px;
float: left;
border: solid;
}
.p-box:nth-child(odd) .c-box {
width: 250px;
height: 250px;
margin: 0px;
border: 1px solid black;
background: steelblue;
}
</style>
</head>
<body>
<div class="p-box">
<div class="c-box"> Box 1</div>
</div>
<div class="p-box">
<div class="c-box">Box 2</div>
</div>
<div class="p-box">
<div class="c-box">Box 3</div>
</div>
<div class="p-box">
<div class="c-box">Box 4</div>
</div>
</body>
The nth-of-type/nth-child selectors target specific elements within their parent containers based on their position or order.
Feel free to ask any questions about this topic or related to web development in the question box given below, and you will get a response ASAP! Thank you!