Skip to main content
Version: v6

CSS classes

The <QueryBuilder /> component assigns standard classes to each element. In the (fully operational) query builder below, the title and label for each element have been set to the element's standard class.

The following standard classnames are not labeled below, but for most of them the elements they apply to can be identified by outline color:

  • .queryBuilder (black outline; the outer-most <div>)
  • .ruleGroup (maroon outline)
  • .ruleGroup-header (purple outline)
  • .ruleGroup-body (blue outline)
  • .rule.queryBuilder-disabled (gray outline for locked/disabled rules)
  • .rule.queryBuilder-valid (green outline for valid rules)
  • .rule.queryBuilder-invalid (red outline for invalid rules)
  • .dndDragging (applied to "preview" element while dragging)
  • .dndOver (applied to "hovered over" element while dragging)