Ejercicio sobre selectores css (III)

Ejercicio sobre selectores css (III)

Print Friendly, PDF & Email
Ejercicio sobre selectores css (III)
Valora esta entrada

Este ejercicio es el tercero dentro de la serie de ejercicios sobre selectores CSS.

Es interesante que les des un vistazo.

Ten en cuenta que no están ordenados por dificultad creciente. El orden en que los hagas es indistinto.

Vayamos al ejercicio.

Enunciado

Escribe el html que corresponda con los selectores css indicados en el enunciado.

.primero{}


p.primero{}

	
section.primero{}


#paco{ }

 
 p#moco{}


.primero span{ }


.primero > span{ }


span .primero{}


.primero.parding{ }

Solución del ejercicio

Ninguna solución es única.

Para cada selectores existen multitud de soluciones posibles.

En la solución encontrarás varias posibles respuestas con el objetivo de hacerte reflexionar.

¡Si tienes dudas consulta en los comentarios!

Como debería ser el html para que estos selectores llamasen las etiquetas.

.primero{}
	<p class="primero">hola</p>
	<section class="primero">adiós</section>

p.primero{}
	<p class="primero">hola</p>
	
section.primero{}
	<section class="primero">adiós</section>

#paco{ }
	<p id="paco">hola</p>
	<section id="paco">adiós</section>	
 
 p#moco{}
 	<p id="moco">un texto</p>

.primero span{ }
	<p class="primero"><em><span>genial</span></em></p>	

.primero > span{ }
	<p class="primero"><span><em>me gusta</em></span></p>	

span .primero{}
	span > .primero{}
	<span><p class="primero">fantástico</p></span>

.primero.parding{ }
	<p class="primero parding">motivante</p>
	<p class="parding primero">el orden no importa</p>

¡Hola!

Querido lector,

Es un ejercicio atípico pero práctico.

Espero que te haya ayudado a entender mejor los selectores.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio sobre la propiedad clear:both (float)
- 40
Ejercicio para practicar de una forma muy visual el uso de la propiedad clear:both | left | right; de css cuando se apilan cajas mediante la propiedad float. Incluye solución.
Como mezclar CSS y HTML. Acoplamiento CSS
- 371
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Guía rápida para crear botones personalizados con CSS
- 193
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Maquetar una página de prestashop 1.6 con bootstrap
- 567
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Estilos css para enlaces. :link, :visited:, :hover, :active
- 37
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un botón.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 420
Código html y css de como crear un menú vertical con un submenú horizontal.
La propiedad z-index
- 109
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.
- 43
Ejercicio de repaso de instrucciones básicas de css. Estiliza etiquetas para que parezcan etiquetas que en realidad no son. Incluye solución.
Mi chuleta de instrucciones CSS para dar formato al texto
- 74
Existen muchas instrucciones para dar formato al texto. Es difícil recordarlas todas. Se resumen principales instrucciones css para dar formato a letras, palabras y párrafos.
Diferencia entre visibility:hidden; y display:none;
- 261
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.