Performance: is there space or> faster in CSS?

Question

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

For instance:

#test > *

against

#test *

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

Answer 1

My theory #test1 > *runs faster if you have a nested child, otherwise it should be the same:

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

#test * selects the whole item inside

We will first use this site to perform some tests: CSS Test Client

TEST 1 - ( ): #id * VS #id > * ( 100000 CSS, 10000 )

#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 *: 5040,4 1 1

#id > *: . 5087,75 1 2

TEST 2 - ( ): #outerdiv * VS #outerdiv > * ( 100000 CSS, 5000)

#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 2 case 1

#outerdiv > *: Avg 1604.7ms 2 case 2

, ?

1: - . (6 , 1 CSS)

#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

CSS 5 ,

, .

2: - (5 , 1 CSS)

, CSS ( ),

#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 , 1 4

#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 , 4 1

, , css. #test1 > * , #test1 * .

# test1 > * , ,

?

div.nav > ul li a[title]

, , [title] html, li, ul , , div.nav.

( []) " ", , .

, , . , Mozilla, :

. , . , , , , . , .

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

Answer 2

, .

#test > *, this will access directly the immediate children and
#test* will access any element present inside up to the nth depth 

#test > * .