CODEWITHSUNDEEP
cssperformancecss-selectorsmicro-optimization
mikelplhts
mikelplhts

Reputation: 1221

Is there a difference in performance between the child and descendant selectors?

I can write the CSS selector using the child combinator > or just a space indicating any descendant. For example, I have this HTML code:

<span id='test'>
    <a href="#">Hello</a>
</span>

And I can write my CSS code in the following two ways:

#test > a {
    ...
}

or

#test a {
    ...
}

What is the best way, regarding the performance, to write the following CSS code?

Upvotes: 4

Views: 2045

Answers (2)

KarelG
KarelG

Reputation: 5234

Please be aware that both selectors doesn't give you same output! In your example, it does.

But let's check the next HTML code, which contains two links.

<div id="test">
    <p> lorum ipsum <a href="#">here</a> dolor </p>
    <a href="#">read more</a>
</div>

There is a link between the text, and a link after the paragraph, to allow the user to read more text. (like on news sites).

If you use 

#test a {
    ...
}

Then you will select both links.

If you use 

#test > a {
    ...
}

it will only select the direct descendant link of #test, which is the read more-link ! That is because > is a child combinator. The link in the paragraph won't be selected.

Here below is a snippet to show you the difference. 

#test a {
  color: red;
}
#test > a {
  font-weight: bold;
  font-size: 18px;
}
<div id="test">
  <p>lorum ipsum <a href="#">here</a> dolor</p>
  <a href="#">read more</a>
</div>

As you can see, the second CSS rule has only edited the first child <a> element (the "read more" link).

Now, back to your question about the performance in your situation: if you use both selector on the next HTML part

<div id="test">
    <a href="#">Hello</a>
</div>

Performance wise it's same here.

-- edit1: clarification of the above sentence --

When using a selector, it checks from right to left. In this situation, with one div in the body, and one link element inside that div, the performance is same. That is because when using #test > a, it checks for all links to see if the parent of it has id="test". It doesn't traverse the tree further.

When using #test a, it checks for all parents of the link element (till the root) to see if it has id="test". Since the div is already found at the first parent check in this situation, it doesn't have to traverse the tree further.

But in other situation, when the div isn't the only element in the document, it of course make a difference. You cannot compare the difference here because, as mentioned before, the results are different. Unless you ensure that there are no second-level links under the given div. Then, the use of > is faster of course.

-- end edit --

However, if the person extends the content of the above div, he/she may face an unexpected CSS styling.

But to know the overall performance, it really depends of what you want to achieve by CSS (style all links or only the first level ?) and the DOM tree (depth of the tree ?) in the div#tree.

Upvotes: 5

Oriol
Oriol

Reputation: 288010

Browsers parse selectors from right to left.

Then if you use #test > a, for each a element in your page, the browser checks whether its parent has id="test".

But if you use #test a, for each a element in your page, the browser checks if some of its ancestors have id="test". There shouldn't be many of those elements in the document, so probably the browser will have to check all ancestors of each a.

I haven't done any tests, but I expect checking all ancestors is slower than checking only the parent.

So probably #test > a is faster.

Upvotes: 6

Related Questions