Styled-components Pseudo selectors

Pseudo selectors

import React from 'react';
import styled from 'styled-components';
import { keyframes } from 'styled-components';

const Father = styled.div`
  display: flex;
`;

const animation = keyframes`
  from {
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
`;

// Box안에 있는 span태그를 
// 아래와 같은식으로 부모 styled components를 통해 target 가능

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${animation} 1s linear infinite;
  span {
    font-size: 36px;
    &:hover {
      font-size: 100px;
    }
  }

  /* 위 호버 아래호버 같음 */
  span:hover {

  }
`;

function App() {
  return (
    <Father>
      <Box>
        <span>:)</span>
      </Box>
    </Father>
  );
}

export default App;