Wie entferne ich den oberen Rand, wenn das Element leer ist?

Question

Hier ist meine HTML-Struktur:

p { 
 
    margin: 0; 
 
    border: 1px solid; 
 
} 
 
small { 
 
    display: block; 
 
    margin-top: 40px; 
 
    border: 1px solid #999; 
 
} 
 
small + span { 
 
    display: block; 
 
    border: 1px solid #ccc; 
 
}

<p>content</p> 
 
<small>tags</small> 
 
<span>edit</span>

Alle in Ordnung. Manchmal ist <small> Element leer. Etwas wie folgt aus:

<p>content</p> 
<small></small> 
<span></span> 

In diesem Fall möchte ich die margin-top von <small> entfernen.

Ist das möglich mit pure CSS? Es sollte angemerkt werden, dass ich JS nicht verwenden möchte.

Answer 1

Sie könnten versuchen, eine Kombination von :not und Pseudo-Klassen zu verwenden.

small:not(:empty) { 
    margin-top: 40px; 
} 

Die Negation CSS pseudo-Klasse, :not(X), ist eine funktionale Notation einen einfachen Wählschalter X als Argument nimmt. Es entspricht einem Element, das nicht durch das Argument dargestellt wird. X darf keinen weiteren Negationswähler enthalten. - MDN

---

Die :empty Pseudo-Klasse steht für ein beliebiges Element, das keine Kinder überhaupt hat. Es werden nur Elementknoten und Text (einschließlich Leerzeichen) berücksichtigt. Kommentare oder Verarbeitungsanweisungen haben keinen Einfluss darauf, ob ein Element als leer angesehen wird oder nicht. - MDN