Primer y último elemento de un contenedor (selector :first-child y :last-child)
En este caso ajustamos a cada elemento <li> del menú un formato común mediante una clase.Pero para acabar de ajustar la posición y presentación de los elementos, por ejemplo para conseguir que quede totalmente centrado, es necesario que el primer elemento tenga unos valores de margen diferentes del resto. Y para evitar que el borde derecho que aparece como separador entre elementos aparezca en el último elemento, también tendremos que establecer un formato diferente para él.
ESte es el CSS usado para todo el menú:
.menu-child {
background-color: turquoise;
padding: 10px 0;
overflow: auto;
}
.menu-1 {
float: left;
width: 18%;
margin-left: 1%;
list-style: none;
padding: 5px 0;
text-align: center;
border-right: 4px solid white;
}
Y estas las dos reglas específicas para el primer y último elemento. Además hemos cambiado el fondo del tercer elemento con otro selectores:
.menu-1:first-child {
margin-left: 3%;
}
.menu-1:last-child {
border: 0;
}
.menu-1:nth-child(3) {
background-color: darkturquoise;
}
Por último, la expresión emmet para generar el menú:
ul.menu-child>(li.menu-1>a{Ejemplo item $})*5
Aplicado sobre párrafos
El mismo ejemplo, pero ahora para aplicar diferente formato al primer y último párrafo.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum labore, deserunt veritatis repellat facere
suscipit laudantium aliquam cumque quod debitis! Maxime praesentium sint facilis optio, aspernatur quam nostrum
saepe impedit!
Distinctio voluptas, iste tempora illo nihil magnam suscipit facere quaerat harum deserunt inventore laudantium
ducimus mollitia ullam itaque? Asperiores veniam aspernatur non itaque eos dolorum beatae reiciendis culpa
delectus impedit.
Assumenda cum dolores vitae omnis voluptatibus placeat unde illum eveniet corporis temporibus! Quae, itaque neque
repudiandae possimus quidem voluptas, sapiente dolor in sed dolorem esse, mollitia cum deserunt fugit. Saepe.
Unde voluptatibus laborum error sint est quidem debitis cum accusamus eligendi id, ratione, maiores quis
architecto rerum quas dolor? Commodi reiciendis fuga odio temporibus! Sequi nisi dolorum tempora maxime
distinctio.
Vero modi nihil quis id, libero assumenda labore quibusdam ea ex corrupti facilis at ratione sint odio tempora
maiores deserunt vel unde aperiam. Repellendus possimus, facere debitis quibusdam distinctio nam.
Quae corrupti harum vero officia molestiae mollitia vel dignissimos voluptate ipsam odio quibusdam veritatis,
reiciendis nisi enim quidem id optio quasi et eligendi asperiores architecto voluptas. Commodi iure at
cupiditate.
CSS para todo el grupo:
.entradilla, .noticia {
margin: 40px 10%;
}
.entradilla p {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}
Y el CSS específico para el primer y último párrafo:
.entradilla p:first-child {
font-weight: bold;
margin: 30px 10px;
}
.entradilla p:last-child {
font-style: italic;
border-left: 1px solid;
border-right: 1px solid;
padding-left: 20px;
padding-right: 20px;
}
Por último, la expresión emmet para generar el texto:
article.entradilla>(p>lorem)*6
Asegurar que es el primer o último elemento de ese tipo (:first-of-type y :last-of-type)
Una variación sobre el anterior, para asegurarnos de que seleccionamos el primer párrafo del contenedor, don independencia de si ese párrafo es el primer elemento o no del contenedor. Recuerda que los selectores de los ejemplos anteriores solo funcionan si realmente el primer elemento del contenedor es un elemento párrafo, si es otro tipo de etiqueta ya no le afectaría ese selector. En este caso el primer elemento del contenendor en un titular y el último un enlace, por lo que los selectores anteriores no afectarían al primer y último párrafo. Lo resolvemos con estos otros selectores.
Hace mucho frío
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum iusto eligendi quasi provident, iste officia
pariatur delectus obcaecati. Sed sint debitis voluptatum? Repudiandae maxime earum in tenetur velit! Expedita,
nulla.
Molestiae obcaecati atque provident delectus. Non aliquid voluptate harum accusamus ipsa cupiditate
necessitatibus quos, ea sit commodi voluptatibus laborum rerum qui. Ex architecto, fugit harum labore ipsum
fugiat deserunt illo.
Doloremque non mollitia possimus quae, facilis, amet iure beatae consectetur totam, sequi dolores? Odit, commodi!
Explicabo, quaerat aliquam mollitia vero sed adipisci cupiditate voluptatum harum corrupti eius tempore. Fugiat,
explicabo!
Ab, incidunt minus quaerat, libero eveniet deleniti quis sint nihil velit distinctio, exercitationem accusamus
quae. Nostrum dicta iusto ipsam sit, eligendi facilis excepturi? Ipsum mollitia quasi recusandae eius vero enim.
Reiciendis quod ratione laboriosam consectetur a voluptatem voluptatum quibusdam incidunt animi numquam corporis
accusamus minima similique ipsa veritatis fugit esse, amet minus, quam impedit rem aut? Exercitationem maxime
nemo itaque.
Más información
CSS para el bloque:
.titular {
font-size: 40px;
color: darkblue;
margin-bottom: 20px;
border-bottom: 2px dashed;
}
.noticia p {
margin: 10px 0 10px 40px;
font-family: Arial, Helvetica, sans-serif;
}
CSS para el primer, último y tercer elemento
.noticia p:first-of-type {
background-color: darkblue;
color: turquoise;
}
.noticia p:last-of-type {
font-style: italic;
}
.noticia p:nth-of-type(3) {
font-weight: bold;
}
Y emmet para generar el bloque:
article.noticia>h2.titular{Hace mucho frío}+(p>lorem)*5