Specificity BUG in Developer Tools (Chrome, FireFox)

Universal selector (*) with combinator ( > ) have effect on specificity when defined using developer tools (+ sign for creating New Style Rule)

by Konstantin Rouda

HTML

<div class="main">
  <div class="wrapper">
    <p class="text">Some text for the test</p>
  </div>
</div>

<!-- 
In order to see BUG: 
1. Open Developer Tools and click on the + sign to create New Style Rule (sign resides along side ":hover" and ".cls" buttons inside style tab
2. In new created rule write the following: .main > * { font-size: 7rem;  }
3. Create another Style Rule (see step 1)
4. In the new created rule define: .wrapper { font-size: 1rem; }
-->

CSS

.main {
  
}

.wrapper {
  
}

.text {
  
}