Skip to main content

A Python library for calculating the specificity of CSS selectors

Project description

CSS Specificity Calculator

A Python library for calculating the CSS specificity of CSS selectors.

What is CSS specificity?

CSS specificity determines which style rule is applied by browsers when multiple rules could apply to a given element. It is generally represented as a tuple (a, b, c) or a,b,c (IDs, classes/attributes/pseudo-classes, element/pseudo-elements).

✨ Features

  • Computes specificity for a single CSS selector.

  • Supports all modern selector types:

    • classes (.foo), IDs (#bar), element types (div), attributes ([attr])
    • pseudo-classes (:hover), pseudo-elements (::after, :before)
    • functional pseudo-classes with correct specificity: (:is(), :not(), :has(), :where(), per Selectors Level 4)
    • custom pseudo-elements (e.g. ::part(), ::slotted())
  • Written in modern Python with dataclass support.

  • No dependencies except tinycss2.

  • Fast, simple, and reusable as a module.

🚀 Getting Started

Installation

pip install css_specificity

Or clone this repo and use poetry install if developing locally:

git clone https://gitlab.com/devlink42/css_specificity.git
cd css_specificity
poetry install

💭Usage

from css_specificity import SpecificityCalculator

spec = SpecificityCalculator.calculate("body .foo#bar > a:hover::after")
print(spec)  # Output: 1,2,3
# a = ID count, b = class/attr/pseudo-class, c = type/pseudo-element
print(spec.a, spec.b, spec.c)  # Output: 1 2 3

Handling advanced selectors:

print(
    SpecificityCalculator.calculate(
        ".foo:is(#id, .bar)"
    )
)  # Output: 1,1,0 (because `#id` is the most specific within :is)

🫧 Features in depth and coming soon

✅ Already supported

  • Selectors Supported:

    • Universal (*), type (div), class (.foo), ID (#id)
    • Attribute ([href], [type="text"])
    • Pseudo-classes (:hover, :focus, etc.)
    • Functional pseudo-classes per CSS4 with "max" specificity for :is, :not, :has, and for :where() replaced by zero
    • Pseudo-elements (both ::before, ::after, etc. and legacy :before, etc.)
    • Custom pseudo-elements (Web Components: ::part(), ::slotted())
  • Multiple selectors: The API currently works for a single selector string. If you have a selector list (a, b, c), split and process individually.

🔜 Coming soon

  • Pseudo-classes function :nth-child() and :nth-last-child() => the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument (if any).
  • Better handle complex nested parentheses for pseudo-classes function
  • Test and coverage
  • CLI tool
  • CI/CD Pipeline for testing and potentially publishing to PyPI automatically

🚥 API

SpecificityCalculator.calculate(selector: str) -> Specificity

Returns an instance for the given selector: Specificity

  • a: ID selectors count (#foo)
  • b: class selectors, attribute selectors, and pseudo-classes (.foo, [type], :hover)
  • c: type selectors and pseudo-elements (div, ::before)

Specificity

A simple dataclass with fields .a, .b, .c (all integers), string representation, and comparison operators.

🪛 CLI Usage

(Not yet supported, but planned for a future release. Contributions welcome!)

🫂 Contributing

Contributions, bug reports, and feature requests are welcome!

Development setup:

  • Clone the repo and use Poetry for virtualenv and tool management.
  • For code formatting, use Black. (Pipeline coming soon to better check)
  • For linting, use Flake8. (Pipeline coming soon to better check)
  • For testing, use Pytest. (Pipeline coming soon to better check)
  • For commit messages, use Conventional Commits.

Testing:

Tests are planned. MRs with test cases welcome!

📜 License

This project is licensed under MIT License.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

css_specificity-0.1.3.tar.gz (6.0 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

css_specificity-0.1.3-py3-none-any.whl (6.6 kB view details)

Uploaded Python 3

File details

Details for the file css_specificity-0.1.3.tar.gz.

File metadata

  • Download URL: css_specificity-0.1.3.tar.gz
  • Upload date:
  • Size: 6.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/2.1.2 CPython/3.12.3 Windows/11

File hashes

Hashes for css_specificity-0.1.3.tar.gz
Algorithm Hash digest
SHA256 e2228ca023fcc41d424f55952d738b2c5e0019d52594e4e101ff74fbaf77b0a6
MD5 bdc2c46220298d5a518513478b92fada
BLAKE2b-256 85cf9155f57a511adfaa03e0030bb94cabf97d49218c9c5ab35d21a64a02961b

See more details on using hashes here.

File details

Details for the file css_specificity-0.1.3-py3-none-any.whl.

File metadata

  • Download URL: css_specificity-0.1.3-py3-none-any.whl
  • Upload date:
  • Size: 6.6 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/2.1.2 CPython/3.12.3 Windows/11

File hashes

Hashes for css_specificity-0.1.3-py3-none-any.whl
Algorithm Hash digest
SHA256 ec45ad91361371bd7f65b0fe2aea28b38ab3fef99111f151b358d6190e996b4e
MD5 7f1a6fc18184644c710823154bac477e
BLAKE2b-256 523240edd77cac0a7569333cf21260183eb7a3282de35ad50e42524e7852c287

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page