Performance: Is space or > faster in CSS?

Question

In CSS, which is faster to process, a space or >?

For example:

#test > *

vs

#test *

(Obviously, they have different meanings, but in many circumstances they can be used interchangeably.)

Answer 1

My theory is #test1 > * is faster if you have nested child element, otherwise should be the same:

#test > * will select all direct children to #test.

#test * will select all element inside

We will use this site to do some test first: CSS Test Creator

TEST 1 - page load time(All element inside are direct child): #id * VS #id > * (100000 CSS Rule, 10000 Anchors)

#id * (page load time)

5134 5103 4961 5039
4917 5152 5021 5203
5171 4956 5066 4946
4865 4935 5148 5162
5051 5058 4734 5186

TOTAL: 100808
AVG page load time: 5040.4

#id > * (page load time)

4922 5065 4916 5013
5146 5185 5197 5038
5071 5185 5021 5224
4768 5168 5099 5188
5206 5111 5155 5077

TOTAL: 101755
AVG page load time: 5087.75

#id *: Avg 5040.4 ms Link to the test 1 case 1

#id > *: Avg 5087.75 ms Link to the test 1 case 2

TEST 2 - page load time (nested child): #outerdiv * VS #outerdiv > * (100000 CSS Rule, 5000 Anchors)

#outerdiv * (page load time)

4649 4170
4965 4544
4389 3924
4568 4647
4198 5133

TOTAL: 45187
AVG page load time: 4518.7

#outerdiv > * (page load time)

1687 1634
1341 1475
1221 1782
1648 1759
1777 1723

TOATL: 16047
AVG page load time: 1604.7

#outerdiv *: Avg 4518.7ms Link to the test 2 case 1

#outerdiv > *: Avg 1604.7ms Link to the test 2 case 2

OK, what happened?

Situation 1: All element inside are direct child. (6 element, 1 CSS rule)

#test1 > * {
  background: aqua;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test1">
  <div>child div1</div>
  <div>child div2</div>
  <div>child div3</div>
  <div>child div4</div>
  <div>child div5</div>
</div>

#test1 > * : 6 match attempt happened, got 5 matches 1 fail

#test1 * {
  background: lightgreen;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test1">
  <div>child div1</div>
  <div>child div2</div>
  <div>child div3</div>
  <div>child div4</div>
  <div>child div5</div>
</div>

#test1 * 6 match attempt happened, got 5 matches 1 mismatch

ALL child are matching for both case CSS are applied 5 times so same workload for both

Performance should be the same for the element only have direct child.

Situation 2: Element inside are nested child (5 element, 1 CSS rule)

Based on how CSS selector works (match selector from right to left), in this situation

#test2>* {
  background: aqua;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test2">
  <div>child div1
    <div>child div2
      <div>child div3
        <div>child div4</div>
      </div>
    </div>
  </div>
</div>

#test1 > * 5 match attempt happened, got 1 matches 4 mismatches

#test2 * {
  background: lightgreen;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test2">
  <div>child div1
    <div>child div2
      <div>child div3
        <div>child div4</div>
      </div>
    </div>
  </div>
</div>

#test1 * 5 match attempt happened, got 4 matches 1 mismatch

Mismatch are faster than match because there is no css work to do. Therefore in this situation #test1 > * is faster than #test1 * for nested child element.

That proves my theory about #test1 > * is faster if you have nested child element, otherwise should be the same

How Do Browsers Read Selectors?

div.nav > ul li a[title]

A browser seeing the above selector will first try to match a[title] in the html, and then proceed to the left matching li, ul, and finally div.nav.

This last part of the selector (in this case a[title]) is called the “key selector” and it’s ultimately what will determine how efficient your selector will be.

The sooner browsers can filter out a mismatch, the less they have to check and, the more efficient the selector. David Hyatt writing about selector performance for Mozilla tells us:

This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be. Since a selector that fails is more efficient than if the same selector matches we want to optimize key selectors to fail. The more specific the key selector, the quicker the browser find mismatches.

ref: http://vanseodesign.com/css/css-selector-performance/