diff --git a/src/enhance-props.ts b/src/enhance-props.ts
index 4e775c5..51c04da 100644
--- a/src/enhance-props.ts
+++ b/src/enhance-props.ts
@@ -27,7 +27,7 @@ export default function enhanceProps(
   let className: string = props.className || ''
 
   for (const [property, value] of propsMap) {
-    const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty === SELECTORS_PROP
+    const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty.length > 0
     // Only attempt to process objects for the `selectors` prop or the individual selectors below it
     if (isObject(value) && isSelectorOrChildProp) {
       const prop = property === 'selectors' ? '' : property
diff --git a/src/index.tsx b/src/index.tsx
index cd6677c..90ab9f0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,8 @@ export { default as splitProps } from './utils/split-props'
 export { default as splitBoxProps } from './utils/split-box-props'
 export { setClassNamePrefix } from './get-class-name'
 export { configureSafeHref } from './utils/safeHref'
-export { BoxProps, BoxOwnProps, EnhancerProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types'
+export { CssProps, BoxCssProps, EnhancerProps, SelectorMap } from './types/enhancers'
+export { BoxProps, BoxOwnProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types'
 export {
   KeyframesPercentageKey,
   KeyframesPositionalKey,
diff --git a/src/types/box-types.ts b/src/types/box-types.ts
index 4fe7b1e..a1f9304 100644
--- a/src/types/box-types.ts
+++ b/src/types/box-types.ts
@@ -1,8 +1,6 @@
 import React from 'react'
 import { EnhancerProps } from './enhancers'
 
-export { EnhancerProps }
-
 /**
  * @template T Object
  * @template K Union of keys (not necessarily present in T)
@@ -48,6 +46,6 @@ export type PolymorphicBoxProps<
 /**
  * Convenience type for defining your own components that extend Box and pass-through props
  */
-export type BoxComponent<P = {}, D extends React.ElementType = React.ElementType> = <
-  E extends React.ElementType = D
->(props: PolymorphicBoxProps<E, P>) => JSX.Element
+export type BoxComponent<P = {}, D extends React.ElementType = React.ElementType> = <E extends React.ElementType = D>(
+  props: PolymorphicBoxProps<E, P>
+) => JSX.Element
diff --git a/src/types/enhancers.ts b/src/types/enhancers.ts
index 57431cd..a7af0f2 100644
--- a/src/types/enhancers.ts
+++ b/src/types/enhancers.ts
@@ -197,9 +197,11 @@ export type EnhancerProps = BoxCssProps<CssProps> & {
    *   Hello world
    * </Box>
    */
-  selectors?: {
-    [selector: string]: BoxCssProps<CssProps>
-  }
+  selectors?: SelectorMap
+}
+
+export type SelectorMap = {
+  [selector: string]: BoxCssProps<CssProps> | SelectorMap
 }
 
 export type PropEnhancerValueType = string | number
diff --git a/test/enhance-props.ts b/test/enhance-props.ts
index 5adbab1..faee588 100644
--- a/test/enhance-props.ts
+++ b/test/enhance-props.ts
@@ -85,3 +85,88 @@ test.serial('preserves style prop', t => {
 
   t.deepEqual(enhancedProps, expected)
 })
+
+test.serial('converts styles in selectors to class name', t => {
+  const { className, enhancedProps } = enhanceProps({
+    selectors: {
+      '&:hover': {
+        backgroundColor: 'blue'
+      }
+    }
+  })
+
+  t.deepEqual(className, 'ub-bg-clr_nfznl2')
+  t.deepEqual(enhancedProps, {})
+})
+
+test.serial('injects selector styles', t => {
+  enhanceProps({
+    selectors: {
+      '&:hover': {
+        backgroundColor: 'blue'
+      }
+    }
+  })
+
+  t.deepEqual(
+    styles.getAll(),
+    `
+.ub-bg-clr_nfznl2:hover {
+  background-color: blue;
+}`
+  )
+})
+
+test.serial('converts styles in nested selectors to class name', t => {
+  const { className, enhancedProps } = enhanceProps({
+    selectors: {
+      '&[data-active]': {
+        selectors: {
+          '&:hover': {
+            backgroundColor: 'blue'
+          }
+        }
+      }
+    }
+  })
+
+  t.deepEqual(className, 'ub-bg-clr_nfznl2')
+  t.deepEqual(enhancedProps, {})
+})
+
+test.serial("selectors can be nested without 'selectors' key", t => {
+  const { className, enhancedProps } = enhanceProps({
+    selectors: {
+      '&[data-active]': {
+        '&:hover': {
+          backgroundColor: 'blue'
+        }
+      }
+    }
+  })
+
+  t.deepEqual(className, 'ub-bg-clr_nfznl2')
+  t.deepEqual(enhancedProps, {})
+})
+
+test.serial('injects nested selector styles', t => {
+  enhanceProps({
+    selectors: {
+      '&[data-active]': {
+        selectors: {
+          '&:hover': {
+            backgroundColor: 'blue'
+          }
+        }
+      }
+    }
+  })
+
+  t.deepEqual(
+    styles.getAll(),
+    `
+.ub-bg-clr_nfznl2[data-active]:hover {
+  background-color: blue;
+}`
+  )
+})
diff --git a/tools/story.tsx b/tools/story.tsx
index 18c038e..6ddbeea 100644
--- a/tools/story.tsx
+++ b/tools/story.tsx
@@ -266,6 +266,20 @@ storiesOf('Box', module)
           <Box className="child" backgroundColor="yellow" width={200} height={100} />
           <Box className="child" backgroundColor="green" width={200} height={100} />
         </Box>
+        Nested selector - blue background when <Box is="code">data-active=true</Box>, red background on hover
+        <Box
+          data-active={true}
+          height={100}
+          width={200}
+          selectors={{
+            '[data-active=true]': {
+              backgroundColor: 'blue',
+              '&:hover': {
+                backgroundColor: 'red'
+              }
+            }
+          }}
+        />
       </Box>
     )
   })