Nested Selectors

✏️ Edit this page

Sometimes it’s useful to nest selectors to target elements inside the current class or React component. An example with an element selector is shown below.

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const paragraph = css`
  color: turquoise;

  a {
    border-bottom: 1px solid currentColor;
    cursor: pointer;
  }
`
render(
  <p css={paragraph}>
    Some text.
    <a>A link with a bottom border.</a>
  </p>
)

Some text.A link with a bottom border.

You can use & to select the current class nested in another element:

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const paragraph = css`
  color: turquoise;

  header & {
    color: green;
  }
`
render(
  <div>
    <header>
      <p css={paragraph}>
        This is green since it's inside a header
      </p>
    </header>
    <p css={paragraph}>
      This is turquoise since it's not inside a header.
    </p>
  </div>
)

This is green since it's inside a header

This is turquoise since it's not inside a header.