CSS Specificity Calculator

Enter a CSS selector to calculate and understand its specificity.

CSS Selector

IDs

Classes, Attributes, Pseudo-classes

Elements, Pseudo-elements

Explanation

Selects any <nav> element with the ID "#main-nav", that is a direct child of any <ul> element with the class(es) .menu, that is a direct child of any <li> element with the class(es) .menu-item.

Breakdown

IDs (1)

#main-nav

Classes (2)

.menu.menu-item

Pseudo-classes (1)

:hover

Elements (4)

navullia

Pseudo-elements (1)

::before

← Back to All Tools