CSS The Card Game — the Battle of Specificity
<p><strong>Enter the DYNAMIC world of CSS The Card Game!</strong> Use <strong>SPECIFICITY </strong>to battle against peers and frameworks alike to override their CSS! Combine classes, IDs, and more to make your CSS property WIN AGAINST all others!</p>
<p><img alt="A cartoon figure holding a trading card in his hand says ‘It’s time to write CSS!’" src="https://miro.medium.com/v2/resize:fit:270/1*WEyingpBFX3DcB3br95G3g.jpeg" style="height:183px; width:300px" /></p>
<h1>How to read cards</h1>
<p>All cards have a <strong>NAME</strong> and a <strong>SPECIFICITY</strong>.</p>
<p>The specificity follows the format <code>A, B, C</code>. For example, <code>0, 1, 0</code>means <code>A=0, B=1, C=0</code>.</p>
<p><img alt="A CSS card and its components: Name, Symbol for Selector, Rank, Tasteful art, Description and optional joke, Specificity." src="https://miro.medium.com/v2/resize:fit:630/1*eTyA8ZnVn1h5X-qYNZD4Fg.jpeg" style="height:411px; width:700px" /></p>
<h1>Rules</h1>
<p>Combine one or more cards to create a valid selector. Add the specificity for each column to get the total specificity for the selector. If the specificity of your selector is higher, you win.</p>
<h2>Calculating Specificity</h2>
<p>The selector <code>div.nav.fancy</code> contains <strong>2 classes </strong>and <strong>1 type</strong>, and the specificity is calculated like so:</p>
<pre>
div 0, 0, 1 (type selector)
.nav 0, 1, 0 (class selector)
.fancy 0, 1, 0 (class selector)
______________________TOTAL 0, 2, 1 (total specificity)</pre>
<p>In other words:</p>
<p><img alt="Adding the specificity of two class cards and one ID card. (0, 1, 0) + (0, 1, 0) + (0, 0, 1) = (0, 2, 1)" src="https://miro.medium.com/v2/resize:fit:630/1*VF6zaK3ansTgRvgI4b_YAQ.jpeg" style="height:376px; width:700px" /></p>
<p>When calculating specificity, keep in mind that these are INDEPENDENT columns! When calculating specificity, keep in mind that these are INDEPENDENT columns! Having <code>C=10</code> does not “promote” a selector to <code>B=1</code>.</p>
<h2>How to determine which specificity is higher</h2>
<p>Starting from column <code>A</code>, compare the specificity. If one selector has a higher specificity than the other, it wins. If the values are equal, continue with the next column. When comparing specificity, <code>A > B > C</code> .</p>
<p><a href="https://medium.com/@hanilim/css-the-card-game-the-battle-of-specificity-4d9606011458">Visit Now</a></p>