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

            Tabla de contenidos

            • 3. Selectores
            • 3.1. Selector universal
            • 3.2. Selector etiqueta
            • 3.3. Selector clase
            • 3.4. Selector identificador
            • 3.5. Selector descendiente
            • 3.6. Combinación de selectores
            • 3.7. Selector de hijos
            • 3.8. Selector adyacente
            • 3.9. Resumen de selectores básicos

            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

            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



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