28 Feb Ejercicio sobre selectores css (III)
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:
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
No Comments