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.2.tar.gz (6.1 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.2-py3-none-any.whl (6.7 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: css_specificity-0.1.2.tar.gz
  • Upload date:
  • Size: 6.1 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.2.tar.gz
Algorithm Hash digest
SHA256 6f9735eed46938f1f72517a0361b1c06a71211b924a702e746359da65a726501
MD5 4a9ffd75cd278fd6fc672531abedfa81
BLAKE2b-256 4a9ecc63e9d41217755c062f7d9e91daee3b9317a07aa6baa110758a4efe4a42

See more details on using hashes here.

File details

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

File metadata

  • Download URL: css_specificity-0.1.2-py3-none-any.whl
  • Upload date:
  • Size: 6.7 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.2-py3-none-any.whl
Algorithm Hash digest
SHA256 67c9958bfc0ffb66955e3943afbfe22926ba88217637e51d21c1fe42e51aff58
MD5 0a2b9d36ba6edd18ebf77c8df95eaac8
BLAKE2b-256 5cab95e6069819e0d89831fc880728c3fbc211dfe1a3b098359ed294d59f6fce

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