The CSS :modal pseudo-class lets you style dialog elements differently based on how they were opened. Using show() opens a non-modal dialog that allows background interaction, while showModal() opens a true modal with a backdrop that blocks background interaction. The :modal pseudo-class targets only dialogs opened via showModal(), enabling distinct styling for modal vs. non-modal dialogs. A practical code example demonstrates both the CSS and JavaScript needed to implement this.
1 Impression