Drag and Drop :drop

The :drop pseudo-class matches any element that is a drop target, while the user is dragging an item to be dropped.

The :drop() pseudo-class is similar to :drop, but allows additional filters to be specified, to exclude some drop targets.

Use the HTML dropzone attribute to specify than an element is a drop target.

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop no no no no no no
Mobile no no no no no no

Syntax

E:drop { /* Style properties */ }

E:drop(active || valid || invalid) {
/*
active: the current drop target for the drag operation
valid: matches if the drop target is valid for the object currently being dragged
invalid: matches if the drop target is invalid for the object currently being dragged
*/
}

Example

/* The following example adds a yellow outline to every drop target. */

:drop {
outline: 1px solid yellow;
}

/* The following example adds a yellow outline to all active and valid drop targets. Notice that there is no comma between valid and active. */

:drop(valid active) {
outline: 1px solid yellow;
}

Information is based on Selectors Level 4 - W3C Editor's Draft (last updated on May 24, 2016)
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.