CSS/Selektoren/details-content

Browserunterstützung
caniuse.com

Der ::details-content-Selektor ist ein Pseudoelement, welches den aufklappbaren Inhalt eines details repräsentiert.

Syntax

::details-content {}

anwendbar auf

* details

Beispiel

details::details-content {
  opacity: 0;
  transition:
    opacity 600ms,
    content-visibility allow-discrete 600ms;
}

details[open]::details-content {
  opacity: 1;

}

Wenn das details-Element geöffnet ist, wird der Inhalt mit weichem Übergang eingeblendet - ohne ein Wrapper-div verwenden zu müssen.

Beachten Sie: Der Inhalt eines details-Elements wird vom Browser mit content-visibility:hidden ausgeblendet, damit er der Suche noch zugänglich ist. Die Folge ist, dass Margins, Paddings und Borders, die dem ::details-content-Pseudoelement zugeordnet werden, nicht ausgeblendet werden. Dieses Verhalten ist beabsichtigt. Verwenden Sie den [open]-Attributselektor, um eine CSS-Regel nur dann auf den Details-Inhalt anzuwenden, wenn das Element geöffnet ist.

Siehe auch

• Infobox
  • Details

Weblinks

• CSSWG: ::details-content Selectors Level 4
• MDN: ::details-content
• Browser-Support: caniuse.com