I wrote an article on dev.to concerning CSS specificity and I decided to come up with the fun game that allows you to test your knowledge of CSS specificity.

The CSS selectors in the game is for educational purposes only and as such might not be the most appropriate.

To make the CSS selectors more random, you can check the db folder to add more CSS selectors

Credits to keeganstreet for his specificity-calculator

• Generate random CSS selectors
• Calculate specificity and check score
• Random success message
• Come up with a better UI
• Add extra ids, classes, tags name and pseudo classes
• Add support for attribute selectors
• Add difficulties
• Add explanation of how to calculate the specificity

• npm: npm install
• yarn: yarn

• npm: npm run dev
• yarn: yarn dev

• npm:

    npm run build
    npm run start

• yarn:

    yarn build
    yarn start

For detailed explanation on how things work, check out Nuxt.js docs. -->

To guess the specificity, you just need to count the individual numbers of selectors .

The answer to the image above would be wrong because we have 1 Tag Name, 1 Class and 1 Pseudo-class. Since the Class and Pseudo-class are grouped together that would make it 2 Class and 1 Tag Name.

My answer is now correct because i guessed it according to the selectors. 😎