3

.main p:first-child {
  background: red;
}
<div class="main">
  <h2>Titulo del Main</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis condimentum elit, ac gravida nunc euismod in. Nam posuere ligula purus, sed dapibus ante fringilla condimentum. Quisque quis velit ac ipsum tincidunt fringilla eu ac erat. Maecenas
    pellentesque, ex pulvinar pharetra sodales, tellus tellus ullamcorper mauris, at tristique tortor augue eu leo. Vivamus eleifend dolor eu mi rhoncus viverra. Quisque eu sem non nibh pulvinar finibus quis interdum neque. Phasellus ac mauris eleifend,
    fringilla tellus ut, ornare lorem. Nulla volutpat ultrices urna, a iaculis orci ultrices eu. Morbi sit amet justo fringilla, sodales turpis sit amet, cursus arcu. Curabitur eu libero luctus nulla cursus viverra ut et nunc. Donec sit amet sollicitudin
    odio, ac gravida eros. Nunc magna arcu, blandit in tellus sit amet, pellentesque facilisis diam. Quisque sed velit eros. Suspendisse eget nibh nec dolor vulputate venenatis.</p>

  <p>Fusce accumsan nunc at felis feugiat, ut dapibus ligula tincidunt. Ut sodales sapien et dolor malesuada, facilisis fermentum nunc varius. Nulla sodales urna et lacus interdum facilisis. Ut elementum consectetur semper. Nulla facilisi. Donec pharetra
    arcu gravida, gravida tortor ac, rhoncus neque. Sed ut ipsum ac massa hendrerit blandit. Aenean non est ut orci porta dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin maximus eget justo
    in commodo. Suspendisse id purus arcu.</p>

  <p>Donec tempus facilisis orci et commodo. Curabitur a blandit dui, a viverra neque. Duis vitae urna eu tortor cursus laoreet. Ut lorem ante, euismod id commodo eu, dignissim nec orci. Maecenas tincidunt aliquam lacus, quis luctus lorem ornare eu. Sed
    at purus ut erat viverra bibendum ac a arcu. Aliquam egestas nec augue a bibendum. Maecenas aliquet, augue sit amet congue maximus, urna tortor finibus sapien, ac semper felis lectus at lectus. Cras ac molestie eros. Aenean vitae congue nibh. Vestibulum
    lacus lacus, aliquet ac cursus id, facilisis non ante. Sed quis nibh orci. Fusce maximus ex ligula.</p>
</div>

El primer hijo del elemento P no se selecciona y no aplica los cambios, Hay algo malo en este codigo?

1
  • Y cual seria el codigo para selecionar solo el primer hijo P?
    – VictorM03
    el 5 ene. 2021 a las 20:28

2 respuestas 2

3

Respondiendo a tu pregunta segun documentacion seria:

first-child

La pseudo-clase :first-child de CSS representa el primer elemento entre un grupo de elementos hermanos.

  • Significa que solamente se podra utilizar cuando haya un grupo de elementos hermanos, en este caso seria un grupo de <p> y nada mas, ningun <h2>-<ul>-etc sino no funcionaria, como el siguiente ejemplo

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
<div>
  <p>¡Este texto está seleccionado!</p>
  <p>Este texto no está seleccionado.</p>
</div>

<div>
  <h2>Este texto no está seleccionado: no es un `p`.</h2>
  <p>Este texto no está seleccionado.</p>
</div>

:first-of-type

La pseudo-clase :first-of-type de CSS representa el primer elemento de su tipo entre un grupo de elementos hermanos.

  • Significa que no importa que otros elementos haya como <h2>-<ul>-etc si es del mismo tipo, en este caso el <p>, tomara el primer elemento del grupo, como el siguiente ejemplo

p:first-of-type {
  color: red;
  font-style: italic;
}
<div>
  <h2>Encabezado</h2>
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
</div>

Referencia

0

Lo solucioné utilizando First-of-type, pero segun entiendo puedo utilizar p:first-child sin ningun problema aunque aun no comprendo porque no funciona

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.