[CSS] nesting, &

nesting

부모 루틴 안에서 자식 루틴을 넣어서 짜는 것이라고 보면 된다.

const MyStyle = styled.div`
  width: 50vw;
  height: 150px;
  background-color: ${(props) => (props.bg_color? "red" : "blue")};
  p {
    color: red;
  }
  `;

p 태그라는 자식요소를 추가 시켜서 nesting 시켜줬다.

 

& : 부모 참조자 선택 (div)

&:hover {
  background-color: yellow;
}