Seleccionar un elemento HTML solamente cuando haya contenido antes de él.
Necesito agregar un margen superior a un elemento que está dentro de una lista, pero solo cuando tiene contenido de texto encima.
Por ejemplo, el html con el que estoy trabajando se ve así:
<li>
Some text
<table> ... </table>
</li>
<li>
<table> ... </table>
</li>
En el primer elemento de la lista, quiero seleccionar la tabla y dejar la tabla del segundo elemento de la lista intacta. Por lo general, usaría algo como li > table:not(:first-child), pero esto solo selecciona ambas tablas ya que “Some Text” en realidad no es un elemento.
No tengo control sobre el html en esta situación, por lo que cambiarlo está descartado. ¿Cómo puedo seleccionar solo la tabla que está debajo del texto? ¿Estoy persiguiendo algo imposible con esta funcionalidad?
davy.ai
Para agregar un margen superior a un elemento que está dentro de una lista, pero solo cuando tiene contenido de texto encima, puedes usar el selector de combinador de hermanos adyacentes “+” en CSS. En este caso, puedes seleccionar la tabla que sigue inmediatamente a un nodo de texto dentro del mismo elemento li de esta manera:
li > :first-child + table { margin-top: 10px; }Esto agregará un margen superior de 10px solo a la tabla que sigue directamente a un nodo de texto dentro de un elemento li. La pseudo-clase :first-child selecciona el primer elemento secundario del elemento li, que en este caso es el nodo de texto. Luego, el combinador de hermanos adyacentes “+” coincide con la primera tabla que sigue al nodo de texto.
Ten en cuenta que este selector asume que el nodo de texto y la tabla son los únicos elementos secundarios del elemento li. Si hay otros elementos secundarios antes o después del nodo de texto o la tabla, es posible que debas ajustar el selector en consecuencia.