First, Let me get straight to the point, browsers match css selectors from right to left. If you already know, you don't need to keep reading. If not, please go ahead.
Wrong Idea
.sample table td {
color: red;
}
When you see the above code, browsers interpret abd execute it in the following order.
- Find the sample class
- Find the table element of descendants of 1.
- Find the td elements of descendants of 2.
- Make the text color red.
If you don't think this order seems wrong, maybe you should keep reading this.
Correct Idea
.sample table td {
color: red;
}
When you see the above code, browsers interpret and execute it in the following order.
- Find all td elements
- Check if the table element is present in the ancestor element of 1.
- Check if the sample class exists in the ancestor element of the table element in 2.
- Make the text color red.
CSS selectors are collated from right to left like the above order.
The rightmost selector is called "key selector".
This means that if you specify a selector with a large range of applicability for the key selector, it will likely take a long time to match it.
What's the Problem
Let's say you wrote the code below.
It will first find all td elements in the DOM, and then it will try to confirm the existence of the table element and the sample class.
Since the text color of the table under the sample2 class remains black, there is no need to find the td elements under the sample2 class.
This is an obvious waste of cost.
If the number of td elements under the sample2 class increases, it may lead to performance problems.
<html>
<body>
<div class="sample">
<table>
<tr>
<td>Red</td>
<td>red</td>
</tr>
<tr>
<td>Red</td>
<td>red</td>
</tr>
</table>
</div>
<div class="sample2">
<table>
<tr>
<td>Black</td>
<td>black</td>
</tr>
<tr>
<td>Balck</td>
<td>black</td>
</tr>
</table>
</div>
</body>
<html>
<style>
.sample table td {
color: red;
}
</style>
So, in this case, it's better to give a red class only to the cells where you want the text color to be red like below.
<html>
<body>
<div class="sample">
<table>
<tr>
<td class="red">Red</td>
<td class="red">red</td>
</tr>
<tr>
<td class="red">Red</td>
<td class="red">red</td>
</tr>
</table>
</div>
<div class="sample2">
<table>
<tr>
<td>Black</td>
<td>black</td>
</tr>
<tr>
<td>Black</td>
<td>black</td>
</tr>
</table>
</div>
</body>
<html>
<style>
.red {
color: red;
}
</style>
Top comments (0)