Select child elements in panda css

Popular CSS-in-js libraries are tough to understand at first, but there is nothing impossible to achieve in these.

create CSS rule in Panda CSS.

it's fairly simple, let's say you want to change the background-color of an element.
you can do something like this.

import { css } from "styled-system/css";

const backgroundCss = css({
 backgroundColor: "grey"
})

function Header(){

return <header className={backgroundCss}>
  <ul>
   <li>Home</li>
   <li>Posts</li>
  </ul>
</header>
}

create a CSS rule to select nested elements.

to select nested elements, you can use $, this symbol represents the current element.

import { css } from "styled-system/css";

const backgroundCss = css({
 backgroundColor: "grey",
 "& ul li":{
   backgroundColor: "blue",
 }
})

function Header(){

return <header className={backgroundCss}>
   <ul>
   	<li>Home</li>
   	<li>Posts</li>
   </ul>
</header>
}

using $, you can follow any CSS selector as you can do in plain CSS.

examples
 

select immediate children

const customCss = css({
 "& > div":{
   padding: "10px",
 }
})

multiple selections

const customCss = css({
 "& > div":{
   padding: "10px",
 }
  "& > div li":{
   padding: "4px",
 }
})

pseudo selection

const customCss = css({
 "& > div:hover":{
   padding: "10px",
 }
})

Panda CSS is an amazing and blazingly fast CSS-in-js library, you can do almost everything with it. you can always refer to my other articles to learn more about panda css.