HTML
1. ¿Qué etiqueta HTML define el cuerpo de la página?
• a) <section>
• b) <main>
• c) <body>
• d) <footer>
• Respuesta correcta: c) <body>
2. ¿Cuál es el propósito de la etiqueta <title> en HTML?
• a) Agregar un título dentro de la página
• b) Mostrar el título en la barra del navegador
• c) Aplicar estilos de título
• d) Cambiar el color de fondo
• Respuesta correcta: b) Mostrar el título en la barra del navegador
3. ¿Cómo se define un encabezado de nivel 1 en HTML?
o a) <header>
o b) <h1>
o c) <head>
o d) <h6>
4. ¿Cuál es la forma correcta de combinar múltiples clases en un solo elemento HTML?
• a) <div class="clase1, clase2">
• b) <div class="clase1 clase2">
• c) <div class=".clase1 .clase2">
• d) <div class="clase1.clase2">
• Respuesta correcta: b) <div class="clase1 clase2">
5. ¿Qué etiqueta HTML se usa para mostrar una lista numerada?
• a) <ul>
• b) <ol>
• c) <li>
• d) <dl>
• Respuesta correcta: b) <ol>
6. ¿Cuál de las siguientes opciones muestra una lista con viñetas?
• a) <ul>
• b) <ol>
• c) <li>
• d) <list>
• Respuesta correcta: a) <ul>
7. ¿Qué etiqueta HTML se usa para definir una lista de definiciones?
• a) <ul>
• b) <ol>
• c) <dl>
• d) <li>
• Respuesta correcta: c) <dl>
8. ¿Cómo seleccionas el tercer <li> dentro de una lista <ul> en CSS?
• a) ul > li:nth-child(3)
• b) ul > li:nth-of-type(3)
• c) ul li:nth-child(3)
• d) li:nth-type(3)
• Respuesta correcta: a) ul > li:nth-child(3)
9. ¿Qué etiqueta HTML representa una celda en una tabla?
• a) <tr>
• b) <th>
• c) <td>
• d) <table>
• Respuesta correcta: c) <td>
10. ¿Qué etiqueta HTML representa una tabla de datos?
• a) <data>
• b) <tab>
• c) <table>
• d) <db>
• Respuesta correcta: c) <table>
11. ¿Qué atributo se usa para proporcionar un texto alternativo a una imagen?
• a) title
• b) src
• c) alt
• d) description
• Respuesta correcta: c) alt
12. ¿Cuál es el propósito de la etiqueta <fieldset> en HTML?
• a) Alinear texto
• b) Agrupar campos en un formulario
• c) Definir un campo de texto
• d) Crear una celda de tabla
• Respuesta correcta: b) Agrupar campos en un formulario
CSS
13. ¿Cuál es la forma correcta de enlazar una hoja de estilos externa en HTML?
o a) <stylesheet>style.css</stylesheet>
o b) <link href="style.css">
o c) <link rel="stylesheet" href="style.css">
o d) <style src="style.css">
o Respuesta correcta: c) <link rel="stylesheet" href="style.css">
14. ¿Qué etiqueta HTML se utiliza para enlaces?
o a) <link>
o b) <a>
o c) <href>
o d) <url>
15. ¿Qué propiedad CSS se utiliza para cambiar el color de fondo de un elemento?
o a) background-image
o b) color
o c) background-color
o d) font-color
16. ¿Cómo se especifica un color en formato hexadecimal?
o a) #rrggbb
o b) rgb(rr, gg, bb)
o c) rgba(rr, gg, bb, a)
o d) color(rr, gg, bb)
o Respuesta correcta: a) #rrggbb
Selectores CSS:
SELECTORES BÁSICOS (p, .clase, #id)
PSEUDOCLASES (:hover, :active, :focus)
PSEUDOELEMENTOS (::before, ::after).
17. ¿QUÉ SELECTOR SELECCIONA TODOS LOS ELEMENTOS QUE SON EL PRIMER HIJO DENTRO DE SU
CONTENEDOR?
18. a) :nth-of-type(1)
19. b) :first-child
20. c) :nth-child(1)
21. d) :first-of-type
22. Respuesta correcta: b) :first-child
23. ¿Qué selector selecciona todos los elementos de una clase excepto el primer elemento hijo?
• a) :not(:first-child)
• b) :nth-child(n+2)
• c) :nth-of-type(1)
• d) :not(:nth-child(1))
• Respuesta correcta: b) :nth-child(n+2)
24. ¿Cuál es el selector CSS para un ID?
• a) .id
• b) #id
• c) id
• d) *id
• Respuesta correcta: b) #id
25. ¿Cuál es el selector CSS para un elemento de clase?
• a) #clase
• b) .clase
• c) clase
• d) *clase
• Respuesta correcta: b) .clase
26. ¿Cuál de los siguientes selectores selecciona solo los elementos <p> que son hijos directos de un <div>?
• a) div > p
• b) div p
• c) p + div
• d) div ~ p
• Respuesta correcta: a) div > p
27. ¿Qué selector CSS selecciona elementos con la clase "activo" dentro de un ID llamado "menu"?
• a) #menu activo
• b) #menu .activo
• c) menu#activo
• d) menu.activo
Respuesta correcta: b) #menu .activo
28. ¿Cuál de los siguientes selectores aplica estilo a un elemento con ambas clases rojo y grande?
• a) .rojo.grande
• b) .rojo .grande
• c) #rojo #grande
• d) #rojo.grande
• Respuesta correcta: a) .rojo.grande
Preguntas sobre Pseudoelementos
1. ¿Qué pseudoelemento se usa para agregar contenido antes de un elemento sin modificar el HTML?
o a) :first-line
o b) ::before
o c) ::first-letter
o d) ::content
o Respuesta correcta: b) ::before
2. ¿Cómo seleccionarías la primera línea de un párrafo en CSS?
o a) p::line
o b) p:line
o c) p::first-line
o d) p:first-line
o Respuesta correcta: c) p::first-line
3. ¿Qué pseudoelemento CSS permite cambiar el estilo del primer carácter en una línea de texto?
o a) ::before
o b) ::first-letter
o c) :first-letter
o d) ::first-line
o Respuesta correcta: b) ::first-letter
4. ¿Cuál de los siguientes pseudoelementos es utilizado para agregar contenido después de un elemento?
o a) ::after
o b) :after
o c) ::append
o d) ::last
o Respuesta correcta: a) ::after
5. ¿Qué pseudoelemento CSS es usado para aplicar un estilo a cada línea de texto generada en un elemento de
bloque?
o a) ::before
o b) ::line
o c) ::first-line
o d) ::text-line
o Respuesta correcta: c) ::first-line
6. ¿Cuál es el propósito principal del pseudoelemento ::selection?
o a) Estilizar los elementos seleccionados en una lista.
o b) Estilizar el texto resaltado o seleccionado por el usuario.
o c) Estilizar solo el primer párrafo.
o d) Crear un elemento interactivo.
o Respuesta correcta: b) Estilizar el texto resaltado o seleccionado por el
usuario.
7. ¿Qué pseudoelemento permite aplicar un estilo al texto que representa una primera letra grande, como en un
libro?
o a) ::first-letter
o b) ::dropcap
o c) ::first-line
o d) ::capital
o Respuesta correcta: a) ::first-letter
8. ¿Cómo aplicarías un estilo a los elementos de la lista que tienen un pseudoelemento ::marker en CSS?
o a) li::before
o b) li::marker
o c) li:marker
o d) li::after
o Respuesta correcta: b) li::marker
9. ¿Qué pseudoelemento puedes usar para aplicar estilo al marcador de una lista en CSS?
o a) ::list-item
o b) ::list
o c) ::marker
o d) ::before
o Respuesta correcta: c) ::marker
10. ¿Cómo seleccionarías el pseudoelemento ::placeholder para estilizar el texto de sugerencia en un campo de
entrada?
o a) input::placeholder
o b) input:placeholder
o c) input::hint
o d) input:hint
o Respuesta correcta: a) input::placeholder
11. ¿Qué significa ::before en CSS?
• a) Inserta un pseudo-elemento antes del contenido de un elemento.
• b) Selecciona el primer hijo de un elemento.
• c) Aplica un estilo al contenido de un elemento.
• d) Inserta un elemento antes del contenedor.
• Respuesta correcta: a) Inserta un pseudo-elemento antes del contenido de un
elemento.
Preguntas sobre Pseudoclases
1. ¿Qué pseudoclase CSS selecciona el último hijo de un elemento?
o a) :last-of-type
o b) :last-child
o c) :only-child
o d) :nth-last-child
o Respuesta correcta: b) :last-child
2. ¿Cuál pseudoclase CSS aplicas para dar estilo a un enlace que ha sido visitado?
o a) :link
o b) :hover
o c) :visited
o d) :active
o Respuesta correcta: c) :visited
3. ¿Qué pseudoclase selecciona un elemento al que el usuario le ha hecho clic?
o a) :focus
o b) :hover
o c) :visited
o d) :active
o Respuesta correcta: d) :active
4. ¿Cómo seleccionas todos los elementos de un tipo específico que no tienen un hermano?
o a) :last-of-type
o b) :first-of-type
o c) :only-of-type
o d) :nth-of-type(1)
o Respuesta correcta: c) :only-of-type
5. ¿Qué pseudoclase CSS selecciona todos los elementos que son el primer hijo de su contenedor?
o a) :first-of-type
o b) :nth-child(1)
o c) :only-child
o d) :first-child
o Respuesta correcta: d) :first-child
6. ¿Cuál pseudoclase se usa para aplicar un estilo cuando un elemento tiene el foco, como en un campo de
formulario?
o a) :hover
o b) :focus
o c) :selected
o d) :checked
o Respuesta correcta: b) :focus
7. ¿Qué pseudoclase selecciona elementos que son el tercer hijo en su contenedor?
o a) :nth-of-type(3)
o b) :nth-child(3)
o c) :third-child
o d) :only-child(3)
o Respuesta correcta: b) :nth-child(3)
8. ¿Cómo seleccionarías un elemento de un formulario que ha sido marcado, como en una casilla de
verificación?
o a) :selected
o b) :focus
o c) :hover
o d) :checked
o Respuesta correcta: d) :checked
9. ¿Cuál pseudoclase CSS selecciona el primer elemento de su tipo en un contenedor?
o a) :nth-child(1)
o b) :first-of-type
o c) :only-child
o d) :first-child
o Respuesta correcta: b) :first-of-type
10. ¿Qué pseudoclase selecciona todos los elementos que están deshabilitados, como en un formulario?
o a) :focus
o b) :enabled
o c) :readonly
o d) :disabled
o Respuesta correcta: d) :disabled
11. ¿Cuál de los siguientes selectores selecciona todos los elementos <div> que tienen al menos una clase?
• a) div[class]
• b) div[.class]
• c) div#class
• d) div~class
• Respuesta correcta: a) div[class]
12. ¿Cuál es la forma correcta de seleccionar un elemento con clase activa solo si está dentro de un
contenedor con clase menu?
• a) menu .activa
• b) .menu .activa
• c) #menu #activa
• d) .menu#activa
• Respuesta correcta: b) .menu .activa
13. ¿Cómo seleccionas un elemento con la clase btn que también tiene una clase primario?
• a) .btn[primario]
• b) .btn.primario
• c) #btn.primario
• d) btn.primario
• Respuesta correcta: b) .btn.primario
14. ¿Cómo defines en CSS que un elemento con clase btn cambie de color cuando el cursor está encima?
• a) .btn:focus
• b) .btn:hover
• c) .btn:active
• d) .btn:click
• Respuesta correcta: b) .btn:hover
15. ¿Cómo seleccionarías en CSS todos los elementos que tienen clase importante, pero que no son elementos
<div>?
• a) div.importante
• b) .importante:not(div)
• c) .importante:!div
• d) *importante:not(div)
• Respuesta correcta: b) .importante:not(div)
16. ¿Qué significa .menu-item:nth-of-type(2) en CSS?
• a) Aplica el estilo a todos los elementos de clase menu-item.
• b) Aplica el estilo al segundo elemento con clase menu-item.
• c) Selecciona el segundo elemento de tipo menu-item.
• d) Selecciona el primer hijo de menu-item.
• Respuesta correcta: b) Aplica el estilo al segundo elemento con clase menu-item.
Preguntas sobre selectores básicos (p, *):
1. ¿Qué efecto tiene el selector * en términos de rendimiento cuando se aplica en una página web muy grande?
o a) Mejora el rendimiento porque aplica estilos a todos los elementos
simultáneamente
o b) No tiene impacto en el rendimiento
o c) Puede disminuir el rendimiento debido a la gran cantidad de elementos que
debe procesar
o d) Solo afecta los elementos que tienen atributos id o class
Respuesta correcta: c) Puede disminuir el rendimiento debido a la gran cantidad de
elementos que debe procesar
2. Si aplicas el selector p + p en CSS, ¿qué párrafos se seleccionan?
o a) El primer párrafo en la página
o b) Todos los párrafos
o c) El segundo párrafo, pero solo si está inmediatamente después de otro
párrafo
o d) Los párrafos que están dentro de un contenedor <div>
Respuesta correcta: c) El segundo párrafo, pero solo si está inmediatamente después
de otro párrafo
3. ¿Qué selector CSS usarías para seleccionar todos los elementos <p> dentro de una sección con la clase
contenido?
o a) .contenido p
o b) p .contenido
o c) #contenido p
o d) contenido p
Respuesta correcta: a) .contenido p
4. ¿Qué ocurre si se aplica el selector * > p en un archivo CSS?
o a) Selecciona todos los elementos <p>
o b) Selecciona todos los elementos <p> que son hijos directos de cualquier otro
elemento
o c) Selecciona solo los elementos <p> que son padres directos de otros
elementos
o d) Selecciona todos los elementos de la página
Respuesta correcta: b) Selecciona todos los elementos <p> que son hijos directos de
5. ¿Cómo seleccionarías todos los párrafos <p> que son precedidos por un elemento <h2>?
o a) h2 + p
o b) h2 ~ p
o c) p + h2
o d) h2 p
Respuesta correcta: b) h2 ~ p
6. ¿Qué efecto tendría el selector div p?
o a) Selecciona todos los elementos <p> dentro de cualquier <div>
o b) Selecciona solo el primer párrafo de cada <div>
o c) Selecciona solo los <div> que contienen un párrafo
o d) Selecciona todos los elementos <div> y <p> en la página
Respuesta correcta: a) Selecciona todos los elementos <p> dentro de cualquier <div>
7. ¿Cómo seleccionarías todos los elementos de lista (<li>) dentro de una lista ordenada (<ol>) sin utilizar clases o
IDs?
o a) ol li
o b) li ol
o c) * ol li
o d) ol > li
Respuesta correcta: a) ol li
8. ¿Qué selector CSS aplica estilos solo a los elementos <p> que están dentro de un <section> con el ID content?
o a) #content p
o b) section p
o c) #content > p
o d) p#content
Respuesta correcta: a) #content p
9. ¿Qué hace el selector * + *?
o a) Selecciona todos los elementos con una clase llamada *
o b) Selecciona todos los elementos que tienen un hermano inmediato
o c) Selecciona el primer elemento de la página
o d) Selecciona todos los elementos de la página
Respuesta correcta: b) Selecciona todos los elementos que tienen un hermano
inmediato
10. ¿Cómo seleccionarías todos los <p> que están dentro de un <header> pero no de un <footer>?
o a) header p
o b) header > p
o c) header p:not(footer p)
o d) header p, footer p
Respuesta correcta: c) header p:not(footer p)
Preguntas sobre selectores de clase (.clase):
1. ¿Qué selector CSS se usaría para seleccionar todos los elementos con la clase active que están dentro de un
contenedor con la clase container?
o a) .container.active
o b) .container .active
o c) container .active
o d) .active .container
Respuesta correcta: b) .container .active
2. ¿Cómo seleccionas todos los elementos de clase item que son precedidos por un elemento con la clase header?
o a) .header + .item
o b) .header ~ .item
o c) .header .item
o d) .header > .item
Respuesta correcta: b) .header ~ .item
3. ¿Qué selector CSS selecciona solo los elementos <p> que tienen la clase importante?
• a) p.importante
• b) #p.importante
• c) .p#importante
• d) .importante p
4. ¿Qué hace el selector .box:hover en CSS?
o a) Aplica estilos a todos los elementos con la clase box
o b) Aplica estilos a los elementos con la clase box cuando el mouse está sobre
ellos
o c) Aplica estilos solo a los elementos box dentro de un contenedor hover
o d) Aplica estilos a cualquier elemento dentro de un contenedor con la clase
box
5. ¿Cómo seleccionarías todos los elementos con la clase menu que están dentro de un <nav> y tienen un hijo con la
clase active?
o a) nav .menu > .active
o b) nav .menu .active
o c) .menu > nav.active
o d) nav .active.menu
6. ¿Qué selector utilizarías para seleccionar todos los elementos de clase highlight pero solo si están dentro de un
<section> con la clase content?
o a) .content .highlight
o b) section .highlight
o c) .content.highlight
o d) section .content .highlight
7. ¿Cómo seleccionarías todos los elementos con la clase error que están dentro de un formulario con la clase
contact?
o a) .contact .error
o b) form.contact .error
o c) form .contact .error
o d) .contact > .error
8. Si tienes un contenedor con elementos de clase active, ¿cómo seleccionarías el último elemento de esa clase?
o a) .active:last-child
o b) .active:last-of-type
o c) .active:nth-last-child(1)
o d) .active:last
9. ¿Qué selector CSS usarías para seleccionar todos los elementos con la clase item que son hijos directos de un
contenedor con la clase list?
o a) .list > .item
o b) .list .item
o c) .item .list
o d) .list + .item
10. ¿Qué selector usarías para seleccionar todos los elementos con la clase active que están precedidos por un
elemento con la clase highlighted?
o a) .highlighted + .active
o b) .highlighted ~ .active
o c) .active + .highlighted
o d) .active ~ .highlighted
11. ¿Cómo seleccionarías todos los elementos con la clase card que tienen un hermano directo con la clase featured?
o a) .card + .featured
o b) .card ~ .featured
o c) .card > .featured
o d) .card .featured
Respuesta correcta: b) .card ~ .featured
12. ¿Qué significa la pseudo-clase :hover en CSS?
• a) Activa cuando el elemento está visible.
• b) Estilo aplicado cuando el elemento es tocado o presionado.
• c) Estilo aplicado cuando el elemento es colocado encima del cursor.
• d) Aplica el estilo cuando el usuario hace clic en el elemento.
Respuesta correcta: c) Estilo aplicado cuando el elemento es colocado encima del
cursor.
13. ¿Qué pseudo-clase CSS aplicas para estilizar el primer elemento de un tipo específico dentro de un
contenedor?
• a) :first-of-type
• b) :first-child
• c) :nth-child(1)
• d) :only-child
Respuesta correcta: a) :first-of-type
14. ¿Qué hace la pseudo-clase :nth-of-type(2n) en CSS?
• a) Selecciona cada segundo elemento del mismo tipo.
• b) Selecciona cada segundo hijo del contenedor.
• c) Selecciona solo el segundo hijo.
• d) Selecciona solo el primer y segundo hijo.
Respuesta correcta: a) Selecciona cada segundo elemento del mismo tipo.
15. ¿Cómo se seleccionan todos los elementos de una clase específica llamada contenedor?
• a) #contenedor
• b) .contenedor
• c) contenedor
• d) *contenedor
Preguntas sobre selectores de ID (#id):
1. ¿Qué sucede si usas el selector #header en CSS y tienes múltiples elementos con el ID header en el HTML?
o a) Se selecciona solo el primer elemento con ese ID
o b) Se seleccionan todos los elementos con ese ID
o c) Los elementos con el ID header no se seleccionan
o d) El navegador genera un error debido a los IDs duplicados
Respuesta correcta: d) El navegador genera un error debido a los IDs duplicados
2. ¿Cómo seleccionarías un elemento con el ID main que está dentro de un contenedor con el ID wrapper?
o a) #wrapper #main
o b) #main #wrapper
o c) #main .wrapper
o d) .wrapper #main
Respuesta correcta: a) #wrapper #main
3. ¿Qué selector usarías para aplicar un estilo a un elemento con el ID submit solo cuando el mouse esté sobre él?
o a) #submit:hover
o b) #submit:active
o c) #submit:focus
o d) submit:hover
Respuesta correcta: a) #submit:hover
4. ¿Qué selector utilizarías para seleccionar todos los elementos con el ID button que están dentro de un contenedor
con el ID wrapper?
o a) #wrapper button
o b) #wrapper #button
o c) button #wrapper
o d) #button.wrapper
Respuesta correcta: b) #wrapper #button
5. ¿Cómo aplicarías un estilo a un elemento con el ID footer cuando se le haga clic?
o a) #footer:active
o b) #footer:focus
o c) #footer:click
o d) footer:active
Respuesta correcta: a) #footer:active
6. ¿Cómo seleccionarías el primer elemento con el ID content que está dentro de un contenedor con el ID main?
o a) #main > #content
o b) #main #content
o c) #content:first-child
o d) #content:first-of-type
7. ¿Qué selector CSS usarías para seleccionar todos los elementos con el ID nav dentro de un div que tiene la clase
container?
o a) .container #nav
o b) #nav .container
o c) .container nav
o d) #container nav
Respuesta correcta: a) .container #nav
8. ¿Qué ocurre si aplicas un selector #section en un documento con múltiples elementos que comparten el mismo ID
section?
o a) Solo se selecciona el primer elemento con ese ID
o b) No se selecciona ninguno
o c) Se seleccionan todos los elementos con ese ID
o d) El navegador genera un error
Respuesta correcta: d) El navegador genera un error
9. ¿Cómo aplicarías un estilo a un elemento con el ID main cuando se desplaza la página hacia él?
o a) #main:focus
o b) #main:active
o c) #main:scroll
o d) #main:target
Respuesta correcta: d) #main:target
10. ¿Cómo seleccionas un elemento con el ID form y lo estilizas cuando recibe el foco?
o a) #form:focus
o b) form:focus
o c) #form:active
o d) form#form:focus
Respuesta correcta: a) #form:focus
