Problema de pseudo selector del primer hijo con etiqueta de encabezado

Me quedé atrapado al diseñar una página dinámica de noticias hoy cuando agregué una etiqueta de encabezado al comienzo de mi sección y el primer hijo de la etiqueta de ap dentro de un div dejó de funcionar. Esto es lo que estaba tratando de hacer y estaba funcionando hasta que agregue la etiqueta de encabezado.

.pubs .newsdate { border-top:1px solid rgb(255,179,0); } .pubs:first-child .newsdate { border:none; } 
 

News

//issue

stuff

stuff

El primer borde se eliminó correctamente hasta que agregué la etiqueta del encabezado (h2). Entonces, el pseudo selector dejó de funcionar. ¿Lo que podría haber ocurrido?

.pubs:first-child busca una clase de pubs que también sea el primer elemento secundario de su elemento primario (en este caso, el elemento primario es content clase.) Una vez que agrega un elemento h2 antes de la primera clase de pubs , pubs ya no está el primer niño, pero el segundo .

Pruebe .pubs:first-of-type lugar:

 .pubs:first-of-type .newsdate { border: none; } 

El pseudo selector primero de tipo buscará el primer tipo de cualquier clase o ID o elemento con el que lo anteponga. Con esto quiero decir que no importa si un elemento ( div ), una clase ( .pub ) o una ID ( #pub ) aparece antes del pseudo-selector (cada uno es válido). Aunque no tendría mucho sentido usar una identificación, ya que se supone que son únicos.

También note que dije primer tipo , no primera instancia (dos personas ya han comentado (una eliminó su comentario) confusamente acerca de lo que estoy diciendo). Por ejemplo, si tiene .pubs clase en tres elementos div y dos elementos p , su pseudo-selector :first-of-type se aplicaría al primer elemento .pubs div Y al primer elemento .pubs p .

Por lo tanto, el first-of-type selector de pseudo-selector puede aplicarse a múltiples elementos , dependiendo de cómo lo use.

Si lo piensas bien, esta es una solución mejor que cuando la hiciste funcionar por primera vez, porque esta solución busca específicamente la primera instancia de la clase .pubs , mientras que tu ejemplo solo funciona circunstancialmente (cuando no hay nada antes) .pubs ).

Puede usar :first-of-type para evitar esto.

Ejemplo aquí

 .pubs:first-of-type .newsdate { border:none; }