CSS GUIv0.0.247DocsPropertiesGitHubLog inSign up

Fieldset

Apply nested styles to elements, pseudo-elements, or pseudo-classes.

When you want to create a nested selector, like .some-class p a you can use the Fieldset component. It has support for nested elements and all pseudo-elements and pseudo-selectors so you can also target .some-class p a:link.

Usage

import { useState } from 'react'
import { Editor, Fieldset, Inputs, styled } from '@compai/css-gui'

const MyEditor = () => {
  const [styles, setStyles] = useState({
    '::first-letter': {
      fontSize: { unit: 'px', value: 32 },
    },
  })

  return (
    <>
      <Editor styles={styles} onChange={setStyles}>
        <>
          <Inputs.FontSize />
          <Fieldset type="pseudo-element" name="first-letter">
            <>
              <h2>First letter</h2>
              <Inputs.FontSize />
            </>
          </Fieldset>
        </>
      </Editor>
      <styled.p styles={styles}>Hello, world!</styled.p>
    </>
  )
}

export default MyEditor

Example

Font size

first-letter

Add property to ::first-letter
Color
Font size

Hello, world!

{
  "fontSize": "16px",
  "::first-letter": {
    "fontSize": "32px",
    "color": "tomato"
  }
}