EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            estilos css
            ¿Cómo aplicar estilos CSS en un documento HTML?
            11/10/2019
            Unidades de medida CSS
            Unidades de medida en CSS
            11/10/2019

            Tipos de selectores en CSS

            Selectores CSS

            Tipos de selectores CSS

            3. Selectores

            Como hemos visto anteriormente, los selectores nos ayudan a indicar el elemento sobre el que se van a aplicar los estilos. Existen muchos tipos de selectores y algunos de los más destacados son los que se detallan a continuación.

            3.1. Selector universal

            Sintaxis: * { atributo:valor; }

            Ejemplo:* { color: grey; }/* El estilo se aplicará a todos los elementos de la página*/

            3.2. Selector etiqueta

            Sintaxis: etiqueta { atributo:valor }

            Ejemplo: p {color: green;}  /* El estilo se aplicará a todos los elementos <p>.*/

            3.3. Selector clase

            Sintaxis: .clase { atributo:valor }

            Ejemplo: .blend{color: red;} /* El estilo se aplicará a cualquier elemento que tenga la clase .blend */

            3.4. Selector identificador

            El selector identificador utiliza el atributo id para seleccionar un elemento. Solo puede haber un elemento con un id dado en un documento.

            Sintaxis: #id { atributo:valor }

            Ejemplo: #cent {color: blue;} /* El estilo se aplicará al elemento que tenga el id #cent */

            3.5. Selector descendiente

            Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del elemento padre.

            Sintaxis: selector1 selector2 selectorN {atributo: valor;} /* El estilo se aplica sobre el selector N */

            Ejemplo: div p { color: black;} /* El estilo se aplica a todos los párrafos que se encuentren dentro de una etiqueta div */

            3.6. Combinación de selectores

            La combinación de selectores nos permite dar un estilo a todos los selectores indicados.

            Sintaxis: selector1, selector2, selector3{atributo: valor;} /* El estilo se aplica sobre los selectores indicados */

            Ejemplo: div, p { color: orange;} /* El estilo se aplica a todos los divs y párrafos */

            3.7. Selector de hijos

            Se usa para seleccionar un elemento que es hijo de otro elemento.

            Sintaxis: selector1 > selector2 {atributo: valor;}  /* El estilo se aplica sobre el selector 2 */

            Ejemplo: div > p { color: white;} /* El estilo se aplica a todos los párrafos que sean hijos de un div */

            3.8. Selector adyacente

            Se usa para seleccionar elementos que son hermanos, es decir, su elemento padre es el mismo y están seguidos en el código HTML.

            Sintaxis: selector1 + selector2{ atributo: valor; } /* El estilo se aplica al selector 2 */

            Ejemplo: div + p { color: black;} /* El estilo se aplica a todos los párrafos que sean hermanos de un div */

            3.9. Resumen de selectores básicos

            SelectorDescripción
            *Selecciona todos los elementos del DOM
            etiquetaSelecciona todas las etiquetas indicadas
            .classSelección de los elementos con la clase .class
            #idSelección del elemento con id #id
            sel1 sel2Selección de los selectores sel2 que se encuentren dentro de los selectores sel1
            .class1.class2Selección de los elementos con las dos clases: class1 y class2
            sel1.class1Selección de todos los selectores sel1 con clase class1
            sel1, sel2Selección de todos los selectores separados por comas
            sel1 > sel2Selección de los selectores sel2 cuando son hijos de sel1
            sel1 + sel2Selección del selector sel2 cuando es hermano de sel1 (su elemento padre es el mismo)
            Ver lista completa de selectores

            En la próxima unidad profundizaremos más sobre este tema y conoceremos los selectores de atributos.




            Ejemplos

            p { background-color: grey; } /* Selector etiqueta */ 
            .clase { color: red; } /* Selector clase */
            #ident { color: green; } /* Selector Identificador */
            * { font-style: italic; } /* Selector universal */ 
            p a { background-color: orange; } /* Selector descendiente */
            h3, small { color: blue;} /* Combinación de selectores */ 
            div>span { color: pink; } /* Selector de hijos */ 
            span+small { background-color: yellow; }  /* Selector adyacente*/

            0

            Comprueba tu aprendizaje

            Indica el selector de tipo identificador

            ¡Bien! ¡Has fallado!

            Indica el selector de tipo clase

            ¡Bien! ¡Has fallado!

            ¿Cómo se aplica un estilo a todos los elementos de una página?

            ¡Bien! ¡Has fallado!

            Indica la regla CSS necesaria para que todos los elementos de una lista que tenga la clase "importante" y que se encuentre dentro de un contenedor
            con la clase "destacado" aparezcan de color rojo

            ¡Bien! ¡Has fallado!

            Test selectores
            ¡Muy bien!
            ¡Has fallado!
            Compartir

            Posts relacionados

            mejores libros html css ja

            mejores libros html css ja

            10/05/2023

            Mejores libros para aprender CSS, HTML y JavaScript en español


            Leer más
            Mejores libros experiencia de usuario

            Mejores libros experiencia de usuario

            08/05/2023

            Mejores libros en español para aprender usabilidad


            Leer más

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results