Nested Selectors

Use nested selectors to target elements inside the current class or React component. An example with an element selector is shown below.

I'm gray!!A button
1import React from 'react';
2import { styled } from '@filbert-js/core';
3
4const Paragraph = styled('p')`
5  color: gray;
6  button {
7    margin: 0 1rem;
8    background: #1f368f;
9    color: white;
10  }
11`;
12
13render(
14  <Paragraph>
15    I'm gray!!
16    <button>A button</button>
17  </Paragraph>,
18);

Use & to select the current class nested in another element:

I'm red !!
I'm gray !!
1import React from 'react';
2import { styled } from '@filbert-js/core';
3
4const Paragraph = styled('p')`
5  color: gray;
6  header & {
7    color: red;
8  }
9`;
10
11render(
12  <div>
13    <header>
14      <Paragraph>I'm red !!</Paragraph>
15    </header>
16    <Paragraph>I'm gray !!</Paragraph>
17  </div>,
18);