CSS Pseudo‑Class Playground - Online Test :is(), :where(), :not()
Write compound selectors and instantly see which elements they match on a test page. Master complex CSS logic.
UD5 Toolkit
Experiment with lookahead & lookbehind assertions in real-time
(?=...) (?!...) (?<=...) (?<!...) — Zero-width assertions that check context without consuming characters
| # | Match | Position | Length | Capture Groups |
|---|---|---|---|---|
| No matches yet. Try adjusting your regex or test text. | ||||
Enter a regex with lookaround assertions to see an automatic breakdown of each lookaround component.
A lookahead (?=...) checks if the text after the current position matches a pattern, without consuming characters. It's a zero-width assertion—it inspects but doesn't "eat" the text. Negative lookahead (?!...) ensures the pattern does not follow.
A lookbehind (?<=...) checks if the text before the current position matches a pattern, without consuming characters. Negative lookbehind (?<!...) ensures the pattern does not precede. Supported in ES2018+ (Chrome 62+, Firefox 78+, Safari 16.4+).
Because lookaround assertions match a position in the text, not actual characters. They don't add to the match length—they simply check a condition at that spot. The regex engine "looks around" without moving its cursor.
Yes! Groups inside lookarounds can capture text. For example, (?=(foo)\d+) will capture "foo" in group 1 even though the lookahead itself doesn't consume characters. This is useful for extracting context-dependent data.
Password validation (must contain digit, uppercase, symbol), string extraction (get text between delimiters), find & replace (match only when surrounded by specific context), and text parsing where context matters but shouldn't be part of the match.
Lookbehind was added in ES2018. It's supported in Chrome 62+, Edge 79+, Firefox 78+, Node.js 8.10+, and Safari 16.4+. Older browsers (especially Safari < 16.4) will throw a SyntaxError. Always test with your target browsers.
Yes, you can nest lookarounds inside each other. For example: (?=(?=.*\d).{8,}). However, deeply nested lookarounds can become hard to read and debug. Use this tool to experiment and understand how they interact!
Write compound selectors and instantly see which elements they match on a test page. Master complex CSS logic.
Test the powerful :has() pseudo‑class. Write selectors like .card:has(img) and see the live result. Revolutionary for CSS architecture.
Enter expected low temperature and get minimum recommended pad R‑value. Visual conductivity guide for winter camping.
Animated SVG steps showing how to fold a fitted sheet perfectly. Clean visual reference.
Enter ambient temperature, precipitation, and whether your horse is clipped to get a recommendation for blanket weight (sheet, medium, heavy).
Adjust a sleeping bag's EN rating based on sleeping pad R‑value, clothing, and personal warmth.
Interactive checklist of the classic 10 essentials for safe hiking. Check items, see explanations, and never forget critical gear for the trail.
Register a periodic background sync and see the status. Schedule content updates for your PWA. API demo.
Override your browser's geolocation to any coordinates and test how your app responds. For development and privacy testing.
Load a video and visually check if audio aligns with lips. Use frame‑by‑frame stepping. Debug playback issues.
Check if your page triggers the beforeinstallprompt event. Simulate the install flow. Debug PWA installability.
Paste your Accept‑Language header and see which languages your site should serve based on quality values. Internationalization helper.
Register a service worker, subscribe to push, and send a test notification using a VAPID key pair. Step‑by‑step demo.
Override your browser's geolocation to any coordinates and test how your app responds. For development and privacy testing.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Test the Web Share API by sharing text, links, and files directly from the browser. Check compatibility and see example code.
Check if your browser and display support the wider DCI‑P3 color space. See the difference with a simple test pattern.
Enter any phrase and instantly see if it's a palindrome, ignoring spaces and punctuation. Fun for word nerds.
An interactive reference for regular expression tokens. Click a token to see its explanation and example. Learn regex faster.
Generate random, formatted ID numbers that match pattern rules for various countries. For testing input validation. No real data.
Pick a method, URL, headers, and body, then send an HTTP request directly from your browser. Debug APIs easily.
Quickly test if your webcam, microphone, and speakers work correctly. See live video and audio meter. No data sent.
Generate random but realistic‑looking data arrays (users, products, orders) with typos and missing fields. For test robustness.
Simple interactive eye dominance test: hold up a virtual dot and see which eye stays aligned. Educational.
View a series of digital Ishihara‑style plates. Not a diagnostic tool, just educational. Read numbers.
Build an iframe with different sandbox flags and see live which features are blocked. For secure embedding.
Paste a regular expression and get a step‑by‑step plain English explanation of what it does. Learn regex.
Simulate random mouse moves, clicks, or keystrokes to test idle‑timeout logic. Stops when you move the mouse. Dev test.
Paste a test card number to verify Luhn algorithm, identify issuer (Visa, MC), and check length. No real data.
Play left‑only, right‑only, and frequency sweeps to test your speakers or headphones. Quick audio check.