DéveloppementPrêt à l’emploi

CSS Specificity Calculator

Estimate the ID, class, attribute, pseudo-class, and element specificity of a CSS selector.

Certaines instructions détaillées et FAQ de cet outil peuvent être disponibles uniquement en anglais.

Espace de travail interactif

Aucun compte requis

CSS Specificity Calculator

These extra tools run in your browser. JWT signing keys and source text stay in this tab; treat generated tokens as credentials and never publish secrets.

New
cURL converter: Translate common cURL requests into Python, JavaScript, and PHP.
New
JWT signer: Sign JSON claims with HMAC or an RS256 PKCS#8 key.
New
OpenAPI viewer: Inspect operations from JSON, YAML, OpenAPI, or Swagger files.
New
.gitignore generator: Start a project ignore file from Node, Python, Java, Go, or React presets.
New
CSS specificity calculator: Compare common ID, class, attribute, pseudo-class, and element selectors.
New
Code screenshot generator: Render a code snippet locally and download a PNG.
New
README + license generator: Draft a README and SPDX license notice for a project.

cURL to Python, JavaScript, and PHP

Python (requests)
import requests
response = requests.post("https://api.example.com/items", headers={"Content-Type":"application/json"}, data="{\"name\":\"sample\"}")
print(response.status_code, response.text)

JavaScript (fetch)
const response = await fetch("https://api.example.com/items", { method: "POST", headers: {"Content-Type":"application/json"}, body: "{\"name\":\"sample\"}" });
console.log(response.status, await response.text());

PHP (cURL)
$ch = curl_init("https://api.example.com/items");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]);
curl_setopt($ch, CURLOPT_POSTFIELDS, "{\"name\":\"sample\"}");
$response = curl_exec($ch);
curl_close($ch);

JWT signer (HS256, HS384, HS512, RS256)

Signing algorithmJWT payload (JSON object)HMAC signing secret

Signing does not validate token claims, issuer, audience, or authorization policy. Avoid production secrets in shared devices.

OpenAPI / Swagger viewer

.gitignore generator

Project stack

node_modules/
.npm/
.env*
dist/
coverage/
.DS_Store

CSS specificity calculator

CSS selector

Specificity (IDs, classes/attributes/pseudo-classes, elements): 1, 2, 3

This quick estimate follows common selector forms; :is(), :not(), and :has() argument specificity can vary from this simplified count.

Code screenshot generator

function greet(name) {
  return `Hello, ${name}!`;
}

README and license notice generator

Project nameProject description

README.md

# my-project

A short description of what this project does.

## Getting started

```bash
# Install dependencies
npm install
# Run the project
npm run dev
```

## Usage

Describe how to use my-project.

## License

SPDX-License-Identifier: MIT

SPDX license identifier

LICENSE (SPDX notice)

SPDX-License-Identifier: MIT
SPDX-FileCopyrightText: 2026 my-project

Use the SPDX identifier to reference the complete standard license text.

The notice identifies the license but is not a substitute for the complete license text; include the official full text in distributed projects.

Qu’est-ce que CSS Specificity Calculator ?

Estimate the ID, class, attribute, pseudo-class, and element specificity of a CSS selector.

Fonctionnement

Estimate the ID, class, attribute, pseudo-class, and element specificity of a CSS selector.

Utilisations courantes

Estimate the ID, class, attribute, pseudo-class, and element specificity of a CSS selector.

Limites

Les résultats peuvent dépendre du navigateur, du réseau, des données saisies et de services externes. Cet outil fournit des informations et ne remplace pas un diagnostic spécialisé ni un conseil professionnel.

Questions fréquentes

Qu’est-ce que CSS Specificity Calculator ?: Estimate the ID, class, attribute, pseudo-class, and element specificity of a CSS selector.

Outils associés

Générateur de dégradés CSS

Créez des dégradés CSS linéaires ou radiaux, ajustez les couleurs et copiez le code avec aperçu.

Générateur de bordures arrondies CSS

Ajustez séparément chaque angle et les rayons horizontal et vertical, puis copiez border-radius.

Générateur de boutons CSS

Stylisez un bouton avec couleurs, espacements, coins, survol et focus clavier en direct, puis copiez le CSS et le HTML.

Code Screenshot Generator