https://github.com/femcodersclub/cssselectors
An interactive project by femCoders Club showcasing CSS selectors, from basics to advanced, with real examples. Practice and improve your skills! Check out the repository and live demo.
https://github.com/femcodersclub/cssselectors
html-css-javascript selectors
Last synced: 12 months ago
JSON representation
An interactive project by femCoders Club showcasing CSS selectors, from basics to advanced, with real examples. Practice and improve your skills! Check out the repository and live demo.
- Host: GitHub
- URL: https://github.com/femcodersclub/cssselectors
- Owner: femcodersclub
- Created: 2025-01-18T20:14:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-19T23:39:56.000Z (over 1 year ago)
- Last Synced: 2025-03-22T04:27:13.883Z (about 1 year ago)
- Topics: html-css-javascript, selectors
- Language: CSS
- Homepage: https://femcodersclub.github.io/CssSelectors/
- Size: 1.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Domina los Selectores en CSS
Este proyecto, creado por **femCoders Club**, es una demo práctica que acompaña al post [Domina los Selectores en CSS](https://www.femcodersclub.com/recursos/css/selectores-css). Aquí aprenderás a seleccionar elementos del DOM y aplicar estilos de manera precisa, desde selectores básicos hasta avanzados.
## Vista previa
El proyecto incluye ejemplos interactivos y visuales que puedes usar para practicar selectores CSS directamente desde tu navegador.
## Enlaces relevantes
- Repositorio del proyecto: [https://github.com/femcodersclub/CssSelectors](https://github.com/femcodersclub/CssSelectors)
- Demo en vivo: [https://femcodersclub.github.io/CssSelectors/](https://femcodersclub.github.io/CssSelectors/)
- Post Domina los selectores en CSS: [https://www.femcodersclub.com/recursos/css/selectores-css](https://www.femcodersclub.com/recursos/css/selectores-css)
## Contenido
El proyecto incluye las siguientes secciones:
1. **Selectores Básicos**: Aprende a usar selectores por etiqueta, clase e ID.
2. **Selectores Avanzados**: Descubre selectores de atributos, descendientes, hijos directos, hermanos y pseudoclases.
3. **Combinaciones de Selectores**: Combina selectores para estilos más precisos.
4. **Selectores de Tipografía**: Usa selectores como `:first-child`, `:nth-child` y más.
5. **Selectores Estructurales**: Implementa selectores como `:root`, `:not`, `:empty` y más.
6. **Selectores de Interfaz de Usuario**: Personaliza formularios y estados como `:focus` y `:disabled`.
7. **Preprocesadores CSS**: Introducción a Sass y Less con ejemplos de botones reutilizables.
## Funcionalidades destacadas
- **Tema Oscuro**: Cambia entre tema claro y oscuro con un clic.
- **Interacción con Elementos**: Ejemplos dinámicos que responden a eventos como hover y focus.
- **Estilo Moderno**: Diseño limpio y atractivo utilizando variables CSS y transiciones.
## Archivos principales
- `index.html`: Estructura HTML del proyecto.
- `style.css`: Estilos CSS, incluyendo variables y efectos avanzados.
- `index.js`: Lógica interactiva para demostrar selectores y funcionalidad dinámica.
- Carpeta `assets`: Contiene recursos adicionales como el GIF de demostración.
## Ejecución local
1. Clona el repositorio:
```bash
git clone https://github.com/femcodersclub/CssSelectors.git
```
1. Accede al directorio del proyecto:
```bash
cd CssSelectors
```
2. Abre el archivo `index.html` en tu navegador favorito.
## Créditos
Este proyecto fue desarrollado por el equipo de **femCoders Club**, una comunidad enfocada en empoderar a mujeres en tecnología.
Si tienes alguna sugerencia o mejora, no dudes en abrir un issue o pull request en el repositorio.
---
¡Esperamos que disfrutes aprendiendo sobre CSS con este proyecto! 🎉