awesome-repositories.com
Blog
awesome-repositories.com

Descubre los mejores repositorios open-source con nuestra búsqueda potenciada por IA.

ExplorarBúsquedas curadasAlternativas open-sourceSoftware autohospedableBlogMapa del sitio
ProyectoAcerca deCómo clasificamosPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

60 repositorios

Awesome GitHub RepositoriesCSS Selectors

Maps visual style rules to element classes for consistent design application.

Distinguishing note: Focuses on selector-based styling logic rather than general CSS frameworks.

Explore 60 awesome GitHub repositories matching user interface & experience · CSS Selectors. Refine with filters or upvote what's useful.

Awesome CSS Selectors GitHub Repositories

Encuentra los mejores repositorios con IA.Buscaremos los repositorios que mejor coincidan usando IA.
  • grapesjs/grapesjsAvatar de GrapesJS

    GrapesJS/grapesjs

    25,518Ver en GitHub↗

    GrapesJS is a modular, web-based visual editor framework designed for building drag-and-drop page builders and custom content management interfaces. It functions as a structural engine that manages hierarchical document models, allowing developers to create reusable design blocks and complex page compositions. By providing a schema-driven approach to UI configuration, the framework enables the construction of design environments where users can assemble layouts and manage component properties visually without writing raw code. The project distinguishes itself through a highly extensible, plug

    Maps specific style rules to element classes to enable efficient reuse and consistent design.

    TypeScriptdrag-and-dropframeworkno-code
    Ver en GitHub↗25,518
  • less/less.jsAvatar de less

    less/less.js

    17,031Ver en GitHub↗

    Less.js is a CSS preprocessor and compilation engine that transforms a dynamic stylesheet language into standard CSS for web browser rendering. It functions as a tool to compile extended styling syntax, providing variables, mixins, and functions to create maintainable stylesheets. The project includes a source map generator that creates mapping files to link compiled CSS output back to the original source code for debugging. It allows for the integration of custom plugins and functions to automate the generation of final stylesheets within a build process. The engine supports the compilation

    Enables flexible styling rules through selector interpolation and case-insensitive attribute selectors.

    JavaScript
    Ver en GitHub↗17,031
  • chalarangelo/30-seconds-of-cssAvatar de Chalarangelo

    Chalarangelo/30-seconds-of-css

    16,021Ver en GitHub↗

    Short CSS code snippets for all your development needs

    Relies on CSS pseudo-classes to drive all interactive visual effects without JavaScript.

    CSScsscss-snippetseducation
    Ver en GitHub↗16,021
  • sass/sassAvatar de sass

    sass/sass

    15,373Ver en GitHub↗

    Sass is a stylesheet compilation engine and CSS preprocessor that extends standard CSS with variables, nested rules, mixins, and functions. It functions as a comprehensive design system tool, enabling developers to organize complex stylesheets into modular, reusable components while automating the transformation of advanced syntax into browser-compatible CSS. The project distinguishes itself through its sophisticated build automation and language-level extensibility. It provides robust support for programmatic style generation, including conditional logic, iterative loops, and unit-aware math

    Combines multiple selectors hierarchically to generate nested CSS rules.

    TypeScript
    Ver en GitHub↗15,373
  • rstacruz/cheatsheetsAvatar de rstacruz

    rstacruz/cheatsheets

    14,429Ver en GitHub↗

    This project is a comprehensive collection of web development reference guides and technical cheat sheets. It provides a curated set of markdown-based documentation designed to help developers quickly locate syntax patterns and API examples for common web technologies and programming languages. The repository serves as a specialized reference library covering several distinct technical domains. It includes extensive guides for CSS, focusing on selectors, Flexbox, Grid, and responsive layout properties, as well as a DevOps command reference for Docker, Kubernetes, AWS, Ansible, and general she

    Provides a comprehensive list of CSS selectors and pseudo-classes for targeting HTML elements.

    SCSS
    Ver en GitHub↗14,429
  • microsoft/playwright-pythonAvatar de microsoft

    microsoft/playwright-python

    14,279Ver en GitHub↗

    Playwright for Python is a browser automation framework designed for end-to-end testing, web scraping, and user interaction simulation. It functions as a headless browser controller that enables programmatic navigation, data extraction, and the execution of complex workflows across multiple rendering engines. The framework distinguishes itself through an actionability-aware interaction engine that automatically verifies element readiness before performing actions, significantly reducing test flakiness. It utilizes isolated browser contexts to maintain separate storage and cookies for parallel

    Finds elements using CSS or XPath expressions when semantic properties are unavailable.

    Pythonchromiumfirefoxplaywright
    Ver en GitHub↗14,279
  • stylelint/stylelintAvatar de stylelint

    stylelint/stylelint

    11,484Ver en GitHub↗

    Stylelint es una herramienta de análisis de código estático y linter para CSS y lenguajes similares a estilos. Identifica errores, aplica convenciones de codificación y opera como un plugin de PostCSS para validar hojas de estilo durante los pipelines de compilación. El proyecto se distingue por su soporte para sintaxis no estándar, incluyendo el análisis de preprocesadores para SCSS y Less, y la capacidad de extraer y lintar estilos incrustados de JavaScript, HTML y literales de plantilla. Cuenta con un sistema de corrección automatizado que corrige programáticamente las violaciones de estilo reparables para garantizar la consistencia. El sistema proporciona una arquitectura de plugins para crear reglas, sintaxis y formateadores personalizados. Cubre una amplia gama de capacidades de garantía de calidad, incluyendo la prevención de sintaxis obsoleta, validación de especificidad de selectores y la aplicación de patrones de nomenclatura y convenciones estilísticas. La configuración se gestiona a través de una lógica de fusión en cascada que admite preajustes compartibles y anulaciones específicas de archivos. La herramienta es accesible a través de una interfaz de línea de comandos, una API programática y varias integraciones de editor.

    Ensures selectors adhere to maximum specificity thresholds to maintain a manageable CSS architecture.

    JavaScript
    Ver en GitHub↗11,484
  • stylus/stylusAvatar de stylus

    stylus/stylus

    11,323Ver en GitHub↗

    Stylus is a CSS preprocessor that transforms a dynamic language into standard CSS. It utilizes a compilation workflow to enable the use of variables, nesting, and arithmetic, which are then rendered into stylesheets for use in frontend asset pipelines. The project is distinguished by a flexible syntax that allows for indentation-based styling, meaning curly braces, colons, and semicolons can be omitted. It further differentiates itself through a JavaScript-driven plugin pipeline and the ability to extend the native syntax with custom JavaScript functions for complex logic. Its capability sur

    Supports referencing the parent selector within nested rules to create pseudo-selectors and state modifiers.

    JavaScriptcsspreprocessorstyl
    Ver en GitHub↗11,323
  • jhy/jsoupAvatar de jhy

    jhy/jsoup

    11,340Ver en GitHub↗

    Jsoup is a Java library designed for parsing, extracting, and manipulating HTML and XML content. It provides a document object model that represents web content as a hierarchical tree, allowing for programmatic navigation and modification of elements, attributes, and text. The library functions as a toolkit for web scraping, enabling the retrieval of remote content via standard web protocols and the management of HTTP sessions for automated form interaction. The library distinguishes itself through its fault-tolerant tokenization, which reconstructs valid document structures from malformed or

    Uses CSS-style selector syntax to efficiently locate and traverse specific nodes within a document tree.

    Javacsscss-selectorsdom
    Ver en GitHub↗11,340
  • ssssssss-team/spider-flowAvatar de ssssssss-team

    ssssssss-team/spider-flow

    11,277Ver en GitHub↗

    Spider-flow is a Java-based web crawling and data extraction platform that provides a centralized environment for managing automated information gathering. It functions as a no-code tool, allowing users to define complex data collection pipelines through a visual, drag-and-drop interface rather than manual programming. The platform distinguishes itself through a graph-based workflow orchestration system where users link discrete nodes to define navigation and parsing logic. It supports dynamic content crawling by integrating headless browsers to execute JavaScript and render page content that

    Enables targeting DOM elements using CSS or XPath selectors for automated data extraction.

    Javacrawlerjsoupspider
    Ver en GitHub↗11,277
  • zh-google-styleguide/zh-google-styleguideAvatar de zh-google-styleguide

    zh-google-styleguide/zh-google-styleguide

    10,977Ver en GitHub↗

    This project is a software engineering reference that provides a cross-language formatting standard and industry-standard practices for architectural patterns, memory management, and identifier naming. Its primary purpose is to implement a unified set of indentation and whitespace rules applied consistently across multiple distinct programming environments. The project specializes in technical documentation localization, providing Chinese language translations of official programming style guides. It maps original English coding standards to Chinese language references to maintain meaning acr

    Limits the use of ID selectors in stylesheets to keep specificity low and simplify overrides.

    Makefile
    Ver en GitHub↗10,977
  • chokcoco/css-inspirationAvatar de chokcoco

    chokcoco/CSS-Inspiration

    10,866Ver en GitHub↗

    This project is a curated collection of galleries and component libraries that demonstrate pure CSS visual effects, 3D transforms, animation patterns, and layout solutions. It serves as a visual catalog of interactive UI elements and graphics built exclusively with HTML and CSS. The collection distinguishes itself by implementing complex interactivity, such as state management and animation triggers, using only CSS pseudo-classes and keyframes without any JavaScript. It also features a system for generative art and algorithmic patterns, as well as spatial 3D constructions using perspective an

    Implements UI logic for tabs and input states using pure CSS pseudo-classes.

    CSS
    Ver en GitHub↗10,866
  • stevenjoezhang/live2d-widgetAvatar de stevenjoezhang

    stevenjoezhang/live2d-widget

    10,764Ver en GitHub↗

    This project provides an animated Live2D character widget that can be embedded on any web page as an interactive mascot. The widget renders characters using the Cubism SDK on an HTML canvas, and can be deployed either via a content delivery network for zero-setup integration or self-hosted on a personal server for full control over asset delivery. The mascot responds to visitor actions through CSS selector-based interaction binding, displaying custom speech bubbles when users hover over or click specific page elements. Visitors can click and drag the character to reposition it anywhere on the

    Binds speech bubble triggers to page elements by matching user-defined CSS selectors.

    JavaScriptjavascript-pluginlive2d
    Ver en GitHub↗10,764
  • purifycss/purifycssAvatar de purifycss

    purifycss/purifycss

    9,863Ver en GitHub↗

    PurifyCSS is a CSS unused style remover and payload optimizer that analyzes HTML and templates to identify and delete unused CSS selectors from stylesheets. It functions as a frontend build automation tool that integrates into development pipelines to automatically strip redundant styles and minify assets during the compilation phase. The tool provides specific optimization for single page applications, identifying and removing redundant CSS while ensuring necessary styles are preserved across dynamic views and states. The utility covers a range of capabilities including static content analy

    Analyzes stylesheets and content to delete selectors that do not match any existing elements.

    JavaScript
    Ver en GitHub↗9,863
  • uncss/uncssAvatar de uncss

    uncss/uncss

    9,408Ver en GitHub↗

    Uncss is a build pipeline CSS optimizer and optimization tool designed to remove unused styles from stylesheets. It analyzes HTML files to identify and strip selectors that do not match any elements in the markup, reducing the final stylesheet size and overall web page weight. The tool functions as a DOM-based CSS analyzer that can simulate runtime document states. It provides mechanisms to preserve required selectors through the use of literal names, regular expressions, and specialized CSS comment markers to ensure styles triggered by user interactions are not deleted. The project supports

    Preserves specific CSS selectors to ensure styles triggered by user interactions are not deleted.

    JavaScriptbuild-toolcleanupcss
    Ver en GitHub↗9,408
  • mzabriskie/react-draggableAvatar de mzabriskie

    mzabriskie/react-draggable

    9,289Ver en GitHub↗

    react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit

    Uses CSS selectors to validate if the clicked element should act as a drag handle.

    JavaScript
    Ver en GitHub↗9,289
  • ariakit/ariakitAvatar de ariakit

    ariakit/ariakit

    8,573Ver en GitHub↗

    Ariakit is a headless component library and accessible UI component toolkit. It provides a set of unstyled web components with built-in accessibility patterns to ensure that screen readers and keyboard navigation function correctly. The project includes an adaptive color engine that calculates high-contrast text and dynamic surface colors for light and dark modes. It also features a concentric layout engine for computing nested padding, margins, and border radii for circular interface elements, alongside a design token system for managing global CSS variables. The toolkit covers broad capabi

    Adjusts color lightness and chroma based on interaction states like hover or focus using CSS variables.

    TypeScripta11yaccessibilityaccessible
    Ver en GitHub↗8,573
  • ericchiang/pupAvatar de ericchiang

    ericchiang/pup

    8,427Ver en GitHub↗

    Pup is a command line tool for extracting and filtering data from HTML documents using CSS selectors. It functions as a parser and selector engine that isolates specific elements based on tags, IDs, classes, and attributes. The project provides utilities for converting selected HTML nodes into plain text, attribute values, or structured JSON objects. It includes a markup formatter that corrects missing tags and applies consistent indentation to improve the readability of HTML documents. The tool handles the retrieval of text content and attributes through a CSS selector engine, supporting co

    Implements a CSS selector engine to isolate specific HTML elements within a document.

    HTML
    Ver en GitHub↗8,427
  • styled-system/styled-systemAvatar de styled-system

    styled-system/styled-system

    7,870Ver en GitHub↗

    Styled System is a JavaScript library that provides a style props approach for building UI components, enabling developers to map CSS properties directly to component props for rapid, declarative development. At its core, it resolves design tokens from a centralized theme object into CSS values, ensuring consistent styling across components without writing custom stylesheets. The library supports theme-aware styling that connects component styles to a theme object for scalable, maintainable design systems with dynamic value resolution. The library differentiates itself through several capabil

    Maps CSS pseudo-classes like hover and focus directly to component props for interactive styling.

    JavaScriptcolorscsscss-in-js
    Ver en GitHub↗7,870
  • verlok/vanilla-lazyloadAvatar de verlok

    verlok/vanilla-lazyload

    7,853Ver en GitHub↗

    vanilla-lazyload is a JavaScript lazy loading library and viewport-based asset loader designed to improve page load speed by deferring the loading of images, videos, iframes, and backgrounds. It functions as an intersection observer media loader that triggers resource downloads and script execution only when elements enter the browser viewport. The project also serves as a native lazy loading polyfill, utilizing native browser loading attributes where supported and providing a JavaScript fallback for older environments. The library distinguishes itself through active bandwidth management, suc

    Enables specifying custom CSS classes and data attributes to identify elements for lazy loading.

    JavaScripthacktoberfestiframesimages
    Ver en GitHub↗7,853
Ant.123Siguiente
  1. Home
  2. User Interface & Experience
  3. CSS Selectors

Explorar subetiquetas

  • Automation Selectors1 sub-etiquetaMechanisms for targeting DOM elements using CSS or XPath for automated testing and scraping. **Distinct from CSS Selectors:** Distinct from general CSS selectors: focuses on selection for automation/testing rather than styling.
  • CSS Selector Jump CommandsScrolling the page to the first element matching a given CSS selector using keyboard commands. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on using CSS selectors as navigation targets, not for applying visual styles.
  • CSS Selector MinificationSimplification of complex CSS selectors to reduce the total byte count of the output stylesheet. **Distinct from CSS Selectors:** Distinct from CSS Selectors by focusing on the optimization of the selectors for size rather than the logic of targeting elements.
  • Customizable Element Selectors4 sub-etiquetasConfiguration options for specifying the CSS selectors used to identify target elements. **Distinct from CSS Selectors:** Focuses on configuring which elements are targeted for lazy loading, not on visual styling rules.
  • DOM Element Filtering2 sub-etiquetasFiltering DOM nodes based on CSS selector matches for data extraction purposes. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on isolating nodes for data retrieval rather than applying visual styles.
  • Element Target Resolution2 sub-etiquetasUsing CSS selectors and URL matching to identify specific HTML elements for functional integration. **Distinct from CSS Selectors:** Distinct from general CSS Selectors which focuses on visual styling, this focuses on identifying elements as targets for editor embedding.
  • External Selector ReferencesDeclare third-party classes or tags so they can be used as key selectors without being renamed or optimized. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on referencing external selectors without renaming, not general selector usage.
  • Interaction Binding SelectorsCSS selectors used to bind interactive behaviors like speech bubble triggers to page elements. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on binding interactions rather than applying visual styles.
  • Interactive Selector BindingsBinding speech bubble triggers to page elements by matching user-defined CSS selectors in a configuration object. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on binding interactive character responses to CSS selectors, not styling.
  • Nested Selector Escaping1 sub-etiquetaMoves nested rules to the root level to override parent scoping. **Distinct from CSS Selectors:** Distinct from general CSS selectors: focuses on the compilation-time structural transformation of nested rules.
  • Outer Selector ReferencingReferences parent selectors within nested rules for pseudo-classes and suffix appending. **Distinct from CSS Selectors:** Distinct from general CSS selectors: focuses on the parent-referencing syntax used within nested blocks.
  • Paged Media SelectorsCSS selectors specifically targeting the @page rule for physical document dimensions and margins. **Distinct from CSS Selectors:** Distinct from general CSS selectors as it targets the page medium rather than DOM elements.
  • Performance Optimizations1 sub-etiquetaStrategies for improving browser rendering speed by optimizing CSS selector complexity. **Distinct from CSS Selectors:** Focuses on the performance impact of selector nesting and depth rather than general styling logic.
  • Preservation ListsConfigurations used to exempt specific selectors from being removed during optimization. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on preventing the deletion of rules rather than defining styles.
  • Programmatic Selector ManipulationTransforms and injects parent selectors as data structures during compilation. **Distinct from CSS Selectors:** Distinct from general CSS selectors: focuses on the programmatic manipulation of selector data structures.
  • Pseudo-Class Interactions2 sub-etiquetasCSS selectors using pseudo-classes like :hover, :focus, and :checked to trigger visual changes. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on interaction-driven pseudo-classes rather than general element selection.
  • Request Triggers viaUsing CSS selectors to trigger network requests by exploiting the browser's automatic loading of resources. **Distinct from CSS Selectors:** Moves beyond visual styling to use selectors as a functional trigger for server communication.
  • Scoped RewritingRewrites every CSS selector to include a unique attribute or class hash that scopes it to its owning component. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on automatic selector rewriting for scoping, not general selector usage.
  • Selector Appending1 sub-etiquetaJoins multiple CSS selectors together to create combined selector strings without descendant combinators. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on the programmatic joining of selector strings rather than general selector-based styling.
  • Selector CompilersPre-compiles CSS selectors into cached functions to speed up repeated matching operations. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on the compilation step for performance rather than style rule mapping.
  • Selector Extensions1 sub-etiquetaModifies selectors by replacing target elements with extended versions that include additional styles. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on the inheritance-like extension of selector rules rather than basic targeting.
  • Selector InspectionRetrieving the current state or structure of compiled selectors during the rendering process. **Distinct from Selector Nesting:** Distinct from Selector Nesting: focuses on inspecting the resulting selector stack for logic rather than just creating nested rules.
  • Selector InterpolationTechniques for dynamically generating CSS selectors using variables and expressions. **Distinct from CSS Selectors:** Distinct from general selectors: focuses on the programmatic interpolation of values within the selector string.
  • Selector IntersectionsCalculates new selectors that match only the elements shared by two provided input selectors. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on the mathematical intersection of selector sets rather than general selector logic.
  • Selector Nesting1 sub-etiquetaCombines multiple selectors hierarchically to generate nested CSS rules. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on the hierarchical nesting of selectors rather than general selector-based styling.
  • Selector Specificity RestrictionsGuidelines for limiting certain types of CSS selectors to maintain low specificity. **Distinct from CSS Selectors:** Focuses on the restriction of ID selectors for specificity control, not the general mapping of selectors.
  • Selector Tokenization PipelinesParses CSS selector strings into token streams that drive matching logic through filter chains. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses on the internal parsing pipeline, not style rule application.
  • Selector-Based ValidationLogic that uses CSS selectors to validate if a pointer event target should trigger a specific interaction. **Distinct from CSS Selectors:** Focuses on event target validation for interactions rather than general visual styling rules.
  • State-Driven Selectors2 sub-etiquetasCSS selectors that target elements based on their current native state such as checked or disabled. **Distinct from CSS Selectors:** Distinct from CSS Selectors: focuses specifically on attribute-based state tracking for form inputs rather than general selector logic.